«

»

Feb 27

Working with HTML Canvas

Canvas is central to HTML5 for 2D graphics.  It is supported to various degree by the modern browsers, which of course means IE lags behind until version 9.

The following creates a canvas element in an HTML page

<canvas id="example" width="200" height="200">
Your browser does not support Canvas. 
</canvas>

To make the above work in IE – you will need to use the ExploreCanvas project (there are others but won’t look at them in this post), which provides a javascript implementation of the canvas element.

<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>

Although ExploreCanvas provides quite a bit of coverage, it currently does not implement all canvas capabilities, one of which is the text capability, which fortunately can be decently patched with the canvas-text project.

Between the two of them we now have 90% of canvas capability, enough for us to play with canvas in a cross-browser fashion.

To use canvas-text, add the following line to <head></head> as well.

<script type="text/javascript" src="canvas.text.js"></script>

You’ll also need to pick a particular font, which is also implemented in javascript as part of the canvas-text project. I have only tried …

Time to start drawing on the canvas…

Rectangle

The following draws a rectangle.

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

The first two line basically returns a drawing context from the particular canvas, so you can use it for drawing. It’s best to put that into an initiation routine, since you’ll likely to reuse the context over and over again.  We won’t see these line repeated going forward.

The 3rd line (fillStyle) sets the color of the fill function. Besides colors it can also be a gradient object, and there are two types of gradients (linear and radial), but with IE only linear works at this moment (IE for now also cannot handle every common color names; for example – magenta).

The last line creates a rectangle filled with the color specified in the 3rd line.  The parameters are top, left, width, and height.

Circle

Drawing a circle looks like the following

context.beginPath();
context.arc(x, y, radius, 0 , Math.PI * 2, true);
context.closePath();
context.fill();

Basically, draw an arc of a circle with the arc() function, with beginPath()/closePath() pair perform the drawing, and fill() to color the circle.

Polygon

Both circles and polygons are drawn with a path, so they both make use of the beginPath(), closePath() and fill(). The difference is that circle uses arc, whereas polygon uses straight lines via moveTo()/lineTo() as follows:

context.beginPath();
context.moveTo(x, y);
for (i = 0; i < points.length; ++i) {
    context.lineTo(points[i][0], points[i][1]);
}
context.closePath();
context.fill();

Text

Finally – text is done as follows

context.font = '20pt Arial';
context.fillText('hello world', 20, 50);

Keep in mind that not every font is available for IE – so trial and error is inevitable.

Gradient

Gradient is created by setting context.fillStyle to a gradient object, which is created via one of the following methods

var linearG = context.createLinearGradient(startX, startY, endX, endY);
var radialG = context.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);

Currently radial gradient does not work in IE.

To create additional “stops” (additional points between the start and end points), use addColorStop().

gradient.addColorStop(color, offset); // offset is between 0 and 1

The above is a quick tour of the canvas API. It’s fairly low level as you are working with a context object. It would be much nicer to work at the shapes level, or even above. Libraries such as Processing is supposed to offer such capability. We’ll revisit canvas in the future.

Share

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

To use reCAPTCHA you must get an API key from https://www.google.com/recaptcha/admin/create