Doodle.js is a library that allows us to easily work with the element <canvas /> and everything that entails. With a similar aesthetic to jQuery, drawing on the canvas that is <canvas /> is as simple as this:
<head>
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]-->
<script src="./doodle-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
function init() {
(function(oo) {
oo.canvas('#my_canvas');
oo.rect({x:25, y:25, width:50, height:50}).draw();
})($doodle);
};
</script>
</head>
<!--init() is called when the canvas is ready for us.-->
<body onload="javascript:init();">
<canvas id="my_canvas" width="600" height="400">
<p>Fallback: Canvas element is not supported in this browser!</p>
</canvas>
</body>
Examples
Do not miss some of the examples available on the homepage of the library:
Spiral multicolor
Rebounds multiple
Tags: canvas, HTML, JAVASCRIPT, OpenSource
