<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>
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.
2) BitmapDataChannels Library:
HTML5 Canvas API implementation of the AS3 BitmapData class.
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.
4) HTML Canvas Library:
5) Fabric.js Library:
Which one is your favorite one? Let us know in comment section below.