Introduction to jCanvas: jQuery Meets HTML5 Canvas
In this post, I’m going to introduce you to jCanvas, a free and open source jQuery-based library for the HTML5 Canvas API.
If you develop with jQuery, jCanvas makes it easier and quicker to code cool canvas drawings and interactive applications using jQuery syntax.
What is jCanvas?
The jCanvas website explains:
The result is a flexible API wrapped up in a sugary, jQuery-esque syntax that brings power and ease to the HTML5 canvas.
jCanvas enables you to do everything you can do with the native Canvas API and more. If you prefer, you can also use native HTML5 Canvas API methods with jCanvas. The draw() method serves just this purpose. Furthermore, you can easily extend jCanvas with your own methods and properties using its extend() feature.
Adding jCanvas to Your Project
To include jCanvas in your project, download the script from the official website or the GitHub page, then include it in your project folder. As mentioned, jCanvas needs jQuery to work, so be sure to include that too.
Your project’s script files will look something like this:
Setting up the HTML Document
To follow along with the examples, start by adding a
<canvas> element tag to a basic HTML5 document.
<canvas id=”myCanvas” width=”600″ height=”300″>
<p>This is fallback content
for users of assistive technologies
or of browsers that don’t have
full support for the Canvas API.</p>
Here are a few points of interest about the code snippet above.
- By default, the dimensions of the
<canvas>drawing surface are 300px by 150px. You can modify this default size in the width and height attributes inside the element’s markup.
- Adding an
- Content inside the
<canvas>element is just a bitmap image. This makes it inaccessible to users of assistive technologies. Also, browsers that don’t have support for the Canvas API will not be able to access its content or interact with it in any way. Therefore, while techniques aiming to make
<canvas>more accessible are yet to be made available, adding some fallback content for this category of users is the recommended practice.
var canvas = document.getElementById(‘myCanvas’),
context = canvas.getContext(‘2d’);
context in the code above stores a reference to the 2D context property of the Canvas object. It’s this property that enables you to access all other properties and methods exposed by the HTML5 Canvas API.
If you’d like to learn more about the topic, HTML5 Canvas Tutorial: An Introduction by Ivaylo Gerchev is a great read.
jCanvas methods and properties already contain a reference to the 2D context, therefore you can jump straight into drawing.
Drawing Shapes with jCanvas
Most jCanvas methods accept a map of property-value pairs that you can list in any order you like.
Let’s start by drawing a rectangle shape.
The Rectangle Shape
This is how you draw a rectangle shape using the
drawRect() method of the jCanvas object.
// Store the canvas object into a variable
var $myCanvas = $(‘#myCanvas’);
// rectangle shape
x: 150, y: 100,
The snippet above caches the canvas object into a variable called
$myCanvas. The properties inside the
drawRect() method are mostly self-explanatory, but here’s a brief rundown:
fillStylesets the rectangle’s background color;
strokeStylesets its border color;
strokeWidthsets the shape’s border width;
yset the coordinates corresponding to the rectangle’s horizontal and vertical position inside the canvas. A value of 0 for x and of 0 for y, i.e., (0, 0), corresponds to the top left corner of the canvas. The
xcoordinates increase to the right and the
ycoordinates increase towards the bottom of the canvas. When drawing the rectangle, by default, jCanvas takes the
ycoordinates to lie at the center of the shape.
- To change this so that
ycorrespond to the rectangle’s top left corner, set the
- Finally, the
heightproperties set the dimensions of the rectangle.
Here is a demo with the rectangle shape:
Arcs and Circles
Arcs are portions of the rim of a circle. With jCanvas, drawing arcs is just a matter of setting the desired values for a few properties inside the
x: 300, y: 100,
// start and end angles in degrees
start: 0, end: 200
Drawing arcs involves setting a value for the
radius property as well as the
end angles in degrees. If you’d like the direction of your arc to be counterclockwise, add the
ccw property to the code above and set it to
Continue reading %Introduction to jCanvas: jQuery Meets HTML5 Canvas%