HTML canvas
Contents
Introduction
One of the most exciting features of HTML 5 is the canvas element. It allows arbitrary drawings that potentially are fed directly to the graphics card.
Support
HTML canvas is only supported by Firefox 1.5, Opera 9 and Safari. If it is popular, perhaps one day IE will support it.
Using Canvas
Creating the Canvas Element
First, you need a canvas element to work with. There are two ways of creating one.
You can put the canvas tag directly in your HTML document. You will need some way of finding it later, so adding an 'id' attribute is recommended. You should also specify the size in pixels.
<canvas id="my_canvas" width="300" height="300"> Your browser doesn't support the canvas element or javascript is disabled. </canvas>
In browsers that don't support canvas (either because it is not a visual browser, javascript is disabled, or canvas is unrecognized), the contents of the canvas element will be shown instead. So you need to put fallback content inside. This is not unlike the noscript element.
The second way of creating a canvas element is through the normal DOM element creation methods.
Drawing to the Canvas
You first need to obtain the context of the canvas before drawing to it. For instance:
var my_canvas = document.getElementById('my_canvas');
var context = my_canvas.getContext('2d');
Note that only '2d' is supported, although there is the potential for 3d contexts which may allow drawing as you would do with OpenGL.
Getting an Image of the Canvas
Browsers that support the canvas element support a toDataURL method.
var png_url = my_canvas.toDataURL('image/png');
var jpeg_url = my_canvas.toDataURL('image/jpeg', 0.8);
For jpegs, the second argument is the quality.
This URL should render the exact image inside the canvas at the time of the call. This URL starts with "data:" so rendering it won't make a call to the internet, but instead, provide instructions on how to create the image to the browser.
Drawing on the '2d' Context
The '2d' context has a number of routines that are not unfamiliar to those who are familiar with OpenGL.
Saving / Restoring State
Saving and restoring state is very critical if you intend to draw graphics that move around the canvas in relation to one another. For instance, if you want to draw a star that rotates around a map with planets that rotate around the star, you need to:
- translate and rotate the canvas for the star.
- Draw the star.
- Store the state.
- Rotate and translate for the planet.
- Draw the planet.
- Restore the state.
- Rotate and translate for the next planet.
- Draw the planet.
- ... etc...
context.save()
Pushes the current drawing state on to a stack to be restored later.
context.restore()
Restores the current drawing state from the stack. If there is no state on the stack, it does nothing.
Translation, Rotation, and Scaling with Matrices
In the 2D world, a 2x3 matrix can describe all rotation, scaling, and translation.
context.scale(x, y) context.translate(x, y) context.rotate(angle in radians clockwise) context.transform(m11, m12, m21, m22, dx, dy) context.setTransform(m11, m12, m21, m22, dx, dy)
Compositing
Compositing describes how data is drawn on the image already rendered.
globalCompositeOperation
context.globalCompositeOperation = newGlobalCompositeOperation
The various globalCompositeOperation values are:
| globalCompositeOperation | Meaning |
|---|---|
| source-atop | Source atop destination. Display the source image wherever both images are opaque. Display the destination image wherever the destination image is opaque but the source image is transparent. Display transparency elsewhere. |
| source-in | Source in destination. Display the source image wherever both the source image and destination image are opaque. Display transparency elsewhere. |
| source-out | Source out destination. Display the source image wherever the source image is opaque and the destination image is transparent. Display transparency elsewhere. |
| source-over (default) | Source over destination. Display the source image wherever the source image is opaque. Display the destination image elsewhere. |
| destination-atop | Destination atop source. Same as source-atop but using the destination image instead of the source image and vice versa. |
| destination-in | Destination in source. Same as source-in but using the destination image instead of the source image and vice versa. |
| destination-out | Destination out source. Same as source-out but using the destination image instead of the source image and vice versa. |
| destination-over | Destination over source. Same as source-over but using the destination image instead of the source image and vice versa. |
| lighter | Source plus destination. Display the sum of the source image and destination image, with color values approaching 1 as a limit. |
| copy | Source (destination is ignored). Display the source image instead of the destination image. |
| xor | Source xor destination. Exclusive OR of the source image and destination image. |
| vendorName-operationName | Vendor-specific extensions to the list of composition operators should use this syntax. |
globalAlpha
context.globalAlpha = newGlobalAlpha
Set the globalAlpha to a value between 0.0 and 1.0. Otherwise, it is ignored. This affects the global alpha of the source image in the above.
Stroke and Fill
context.strokeStyle = newStrokeStyle; context.fillStyle = newFillStyle;
The stroke and fill style can either be:
- A color. For instance, "#ffeeff" or "rgba(255,128, 255, 0.57)".
- A CanvasGradient. (See below.)
- A CanvasPattern. (See below.)
(This is a work in progress.)
