A new HTML5 Canvas library: jCanvaScript

Post to Twitter

jCanvaScript is a JavaScript library that provides methods to manage with the content of the HTML5 Canvas element. This new project is very well documented and full of examples in the documentation. I’ve been playing around with it and have found it very easy to use and the fact that everything in their documentation website comes with an example makes it much easier to get up to speed in using the library.

You can find their Twitter feed here and the GitHub repository here.

Just as an example I created a little demo of spelling out my blog using an elastic effect. It took me about 10 minutes to write it and get it working. Make sure you are using either Chrome, Safari or Firefox – not sure if it works in the Internet Explorer 9 release candidate or not as I’ve only tested it in Firefox and Chrome.

Live demo here

Here is the code:

<!DOCTYPE html>
<html lang="en-us" >
<head>
    <title>jCanvaScript Demo</title>
	<script type="text/javascript" src="jCanvaScript.1.1.2.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono">
	<script type="text/javascript"> 
        function start()
        {
            jc.start('canvas_1',25);
            
			var blogName = ["G", "I", "A", "N", "T", "F", "L", "Y", "I", "N", "G", "S", "A", "U", "C", "E", "R"];
			var startX = 10;
			var endX = 145;
			
			for (x in blogName)
			{
				jc.text(blogName[x], startX, 110)
					.font('32px Droid Sans Mono')
					.animate({x:endX},3000,{type:'inOut', fn:'elastic', n:1.5});
				
				endX += 22;
			}
        }

        function replay()
        {
            jc.clear('canvas_1');
			start();
        }
	</script>
	<style>	
		#canvas_1 {
		  border: solid 1px #000;
		  margin-left: 20px;
		  margin-top: 20px;
		}
		#replay_btn
		{
			margin-left: 20px;
		}
	</style>
</head>
<body onload="start();">
	<canvas id="canvas_1" width="650px" height="200px">Canvas not supported</canvas>
	<br />
	<input id="replay_btn" type="button" onclick="replay();" value="Replay"/>	
</body>
</html>

Post to Twitter

This entry was posted in HTML5, JavaScript. Bookmark the permalink.