Canvas.js
This page is a working example of a resize-able canvas element. It's powered by a script that to provides a few helpful methods for use with canvas elements. So far it has the following methods:
canvas.init()– gives all canvases an id (if they haven't already got one) and registers their drawing contexts incanvas.elements[id].ctx.canvas.resize()– sets the canvas grid dimensions to the actual screen pixel dimensions to preserve a 1:1 pixel aspect ratio after resizing. Stores the new dimensions incanvas.elements[id].widthandcanvas.elements[id].height.canvas.shapes– a library of shapes:roundedRect(id, x, y, width, height, radius, stretch, fill, stroke)
radiusis the radius of the corners andstretchis how 'pinched' they are.fillandstrokeare either boolean, or objects that specify the drawing style with the usual range of parameters:fillStyle,strokeStyle,lineWidthetc.
On the whole, it works. So far these browsers have been tested:
- Safari 3.1 – very smooth
- FireFox 3 – delay in triggering window resize
- Opera 9 – window resize is not triggered until mouse is released
I have discovered some misbehaviour:
- The size of a canvas element cannot be CSS specified using conflicting absolute positions. It defaults to 300x150, the 'standard' dimensions. Therefore width and height must be specified. Obviously, to make it resize, they needs to be set in %, inside a container that resizes.
- IE6 running under WINE on OSX doesn't like Google's ExplorerCanvas at all. I haven't yet tested on Windows.
Download
- canvas.js [3k] 0.1 ALPHA
Resources
- developer.mozilla.org/en/Canvas_tutorial/ – Mozilla canvas tutorial
- excanvas.sourceforge.net – Google's Explorer Canvas
- acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon – The inspiration that got me into canvas
- webdev.stephband.info/canvas/convert.html – Illustrator to Canvas path convertor