The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.
Here is a sample HTML canvas example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="290" height="80" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Georgia";
ctx.strokeText("crunchify.com Test",10,50);
</script>
</body>
</html>
Output:
My Favorite JavaScript Canvas Libraries:
1) bHive.js Library:
Create rich user experiences, animations, games and applications with bHive, a HTML 5 canvas framework API built to make developing easier, so you can start creating straight away.
Link: http://www.bhivecanvas.com/
2) BitmapDataChannels Library:
HTML5 Canvas API implementation of the AS3 BitmapData class.
Link: https://github.com/pnitsch/BitmapData.js
3) Paper.js Library:
Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
Link: http://paperjs.org/
4) HTML Canvas Library:
HTML canvas library is a full-featured lightweight wrapper library of the native html canvas element written in Javascript, aimed to make visualization and animation using canvas simpler. Features animation support, layers, event capture, multitouch and many examples.
Link: http://html-canvas-lib.sourceforge.net/
5) Fabric.js Library:
Fabric.js is a powerful and simple Javascript canvas library. Fabric provides interactive object model on top of canvas element. Fabric also has SVG-to-canvas (and canvas-to-SVG) parser.
Link: http://fabricjs.com/
Which one is your favorite one? Let us know in comment section below.
I am looking to learn JS and its abilities with canvas. I have my idea for a project what I want to know is what is best to use / learn if I want to create an app with features such as snapping onto custom images, collision detection, drag and drop increasing shape dimensions etc. I dont mind if its learning more than one library etc. Thanks
Thanks for sharing details Nicky.
Great Post !!
Thanks Rahul! I’m glad to help!
Please check out ZIM at http://zimjs. com – it is a very complete library that extends CreateJS to give one-line drag and drop, multiple types of hitTests, components and much more. Have a look at the ZIM Bits section too with many examples of Interactive Media. Thanks! Code Pizzazz!
Thanks Dan for suggestion.
NP. Did you give it a try – any questions or suggestions? We are heading in to Version 5 so would love to hear some thoughts!
Hi Dan – sure. I’ve put it in my list and will give it a try in a week or so. Thanks.
CreateJS (EaselJS) is great for more advanced projects.
Thanks for sharing details on EaseJS.
Thanks
You are welcome Samo.
You may also find CutJS interesting.
Thanks for tips and suggestion Alex.
I think fabricjs is best for making interactive graphics application. I have made advanced photo editor using fabricjs.
Thanks for sharing your thoughts on Fabricjs. Could you also share any live examples which you might have with Crunchify Readers?
and what about
KineticJS?
Hi,
Interesting list, thank you. There is also cgSceneGraph.
It embeds a lot of cool features, is already used on public games and pro applications and the community is growing up.
Hope you\’ll find the time to try it 🙂
Thanks Gwennael Buchet. Very nice framework. I’m definitely interested in developing something out of it..
Another powerful canvas lib is ZinoCanvas.
Thanks Dimitar for sharing ZinoCanvas. Looks feature rich.
Thanks Delapouite for pointing Kineticjs. Looks great.
This is great post Crunchify. paper.js is my favorite canvas library.
Thanks Raphael for your comment. Paper.js and bhive.js are my favorite one..