Recently I've been learning HTML5 stuff, especially canvas.
I looked at many online drawing applications written in Flash(e.g. http://www.sumopaint.com, http://www.onemotion.com/flash/sketch-paint/) and they all seem packaged with awesome drawing effects. Smooth lines, simulated pencil/brush etc.
What I'd like to know is - is there a way to get such effects in canvas, and how?
I'm willing to put 1 month of (free-time)coding work to do it, but I'm not sure if it's even feasible.
Canvaspaint.org is an early now-public-domain project along these lines; the source is available here. Here (source) and here and are more recent interesting projects.
Related
paper.js
EaselJS
fabric.js
KineticJS
Hello guys I am new in html5 canvas development and I am lost in choosing canvas frameworks. There are so many of them that I can't find out what to use. So here I am! I want your help to choose which one is better for my needs. There are my needs
1) I want the framework used Vector graphics, I know canvas is not DOM, I realy don't care about it but what I mean is I want to manipulate with objects after its creation, PaperJS has this feature I don't know about others. If advanced mouse events will be available it would be better.
2) I want to use the framework for images, I will load image and animate them with canvas, move, animate some colors...
3) I want the framework to be fast because of my needs (image animation should be smooth)
4) I want the framework to have good community because I know I will need some help.
So what do you think which one is better for me? and please if you can write down from my list which are the strength and weakness for each framework?
HTML5 canvas is still very fresh environment. You can get impression there is a lot of tools already available, they are often quite immature though.
My answer will cover only part of your question because I used only KineticJS and EaselJS.
You can start from reading opinions at this page (mine is the last one at the bottom).
Speaking shortly KineticJS has lower entry barrier. It's simple drawing library and has some support for mouse events too. At the time I was trying to use it it was barely extendable. I found it really hard to customize for my needs.
EaselJS is a bit harder to start with, but it's more advanced too. Now it's part of other libs set known all together as CreateJS. It seems that lot of development going around there.
Both Kinetic and Easel supports mouse event. I don't remember
well the Kinetic, sensing 'onMouseOver' is costy with Easel though.
Also both mentioned libs allows objects manipulation. You can find
here TweenJS also useful as addition.
Again both Kinetic and Easel allows this. Easel also has support for
sprites - 'animated images' well known for web game developers.
I'm not sure about Kinetic as I haven't reached animation part of my
project before I dropped it (the lib, not the project). With Easel
speed is tricky. It has some optimization methods implemented like
for example objects cache or snapToPixel flag. Examples seems to run
really well. However for my project using Easel smoothness still is
an issue despite quite a lot of effort put in optimization. Maybe I
misused the API or there is still place for more optimalization I
haven't noticed.
Both libs are quite young but seems to be actively developed.
Authors are rather responsive. Community still isn't big, but I
guess CreateJS as more complete set of tools for creating games will
grow faster.
If you want to check here is the project I mentioned. It's a web page made with usage of EaselJS + TweenJS. Still needs some minor tweaking though.
My colleague and me made an HTML 5 iPad game ( http://braille.gandzo.com/ ) and we would like to upgrade it, and our framweork is not enoguh, for what we want. Some of the things we would change are: graphics update, animations/"effects", multi-player, achievements and so on. The game would stay 2d. Now, as far as I understand, both Unity and Cocos would be good for this task, with Unity having the advantage of being multi-platform.
What I want to know is are there unknown qualites/"flaws" to these two programs which would influence my decision (maybe even by choosing something else). Examples that come to mind are "Unity is too complicated/has too much unneeded options/hoops because it's made with 3d in mind" or "Cocos is significantly more suited for 2d games".
If the game is pretty much in 2d... I would suggest for cocos2d. I am working on cocos2d for past 1 and half years... I don't have experience in Unity but ya my colleagues who used to work on Unity had so many problems with animation, texturing etc.
BTW I was not able to play you game on my Chrome. :)
What would you say, using canvas or webGL?
I have read somewhere that canvas isn't very performant, because currently it's based on the DOM, or something like that. On the other side webGL isn't well supported yet. And it's also more difficult to learn I guess.
The game is "2.5"D - it doesn't need 3D. But wegGL could make sense for good effects and because it's processed in the graphics card. The fact that it is not well supported across browsers is something I could live with, if I see it really offers advantages (performance, effects, etc.) which I couldn't get using canvas.
I don't mind about steeper learning curve. What is important is that the game is well scalable, performs well at the end, and that most features are potentially possible.
Hope to get some good opinions, thanks in advance!
2D Canvas will do you well here.
The math will be far easier than using WebGL and 2D Canvas is now hardware accelerated on every major desktop browser and enjoys wider support on mobile devices than WebGL.
Canvas is not slow because its a DOM element, ideally the only time you touch the DOM is when you get the context. Touching the DOM, for the record, is always slow but you only have to do it that one time.
There are a few tutorials about isometric canvas games as well as some good questions here on StackOverflow asked by Neurofluxation, but he deleted most of the relevant code from his questions for some reason, which is a bit of a shame.
I'm working on a paint application with canvas, and trying to make some better tools.
now i have one tool that only connects lines while following the mouse movement.
can you think of a good tutorial or a good idea for other tools like spary, or brush?
thanks
You might find the following resources useful:
Create a Drawing App with HTML5 Canvas and JavaScript
Create a Paint Bucket Tool in HTML5 and JavaScript
Overview of JavaScript Application Development - Case CanvasDraw
Presentation - Intro to HTML5 Canvas
Feel free to contact me if you need more specific pointers. I think those above should at least help you to get started. :)
Please have a look at this code project article.
it may be useful to you.
http://www.codeproject.com/Articles/427422/Paint-Brush-Application-Using-HTML5-Canvas
thanks
I don't have a tutorial, but I think you should simply use thicker lines to create a brush tool.
A spray tool could draw random points in a circle with random alpha(that's quite easy to implement), but that might be extremely slow on some browsers. Drawing using pre-generated images would be much better but harder to implement.
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.