2. Definition and usage
Canvas: “a resolution-dependent bitmap canvas
which can be used for rendering graphs, game
graphics, or other visual images on the fly.”
(w3c specs on canvas)
The canvas element is an environment for creat-
ing dynamic images.
Keith, J. (2010: 23). html5 for web designers
Koch curve fractal based on processing.js by John Resig
Canvas knowledge base application on en.inforapid.org/
Definition and usage
html5 canvas API 2
3. History
Apple invented <canvas> back in 2004 for their
dashboard widgets, as a proprietary tag, and
even wanted to patent it as intellectual property.
http://ln.hixie.ch/?start=1089635050&count=1,
Lubbers, P. et al. (2010: 25). Pro HTML5 Programming: Powerful APIs for Richer Internet Ap-
plication Development
Still a part of html5 specs, but specs on 2d can-
Webkit clock on http://onotakehiko.com/webkitclock/ vas API are moved to a separate doc:
http://dev.w3.org/html5/2dcontext/
Upcoming web standards inspired by WebKit History
html5 canvas API 3
4. What can it be used for?
Some anticipated uses of canvas include build-
ing graphs, animations, games, and image com-
position.
http://en.wikipedia.org/wiki/Canvas_
element#Usage
Example usage:
• drawing shapes,
CloudKick: real-time cloud visualization on https://www. • filling colours,
cloudkick.com/viz/mozilla/
• creating gradients and patterns,
• rendering text,
• copying images, video frames, and other
canvases,
• manipulating pixels, and
• exporting the contents of a <canvas> to a
static file.
LucidChart - wireframing webapp on lucidchart.com
What can it be used for?
html5 canvas API 4
5. What can it be used for?
An entire book could be written about the use
of the HTML5 Canvas API (and it wouldn’t be a
small book).
Lubbers, P. et al. (2010: 25). Pro HTML5 Programming: Powerful APIs for Richer Internet Ap-
plication Development
RectoVerso Page flip application on aneventapart.com But it’s better to watch it in ac-
tion
Image evolution on alteredqualia.com/visualization/evolve/
html5 canvas API 5
6. What can it be used for?
Canvas graphs on Rgraph vs google analytics based on flash
Google maps with dynamic canvas markers
html5 canvas API 6
7. What can it be used for?
http://www.openrise.com/lab/FlowerPower/
http://flow.momolog.info/
http://www.mrspeaker.net/dev/parcycle/
html5 canvas API 7
9. Too complicated?
html5 toolkit for Dreamweaver CS5 intro vid
Using Ai2Canvas plugin to create canvas directly from Illustrator
Too complicated?
html5 canvas API 9
10. Demonstration
<video> & <canvas> elements brought to-
gether: create dynamic “buttons” for the movie
playback
grabFrame() {
...
var ctx = timeline.getContext(‘2d’);
ctx.drawImage(filmpje, 0, 0, 848, 352,
frameX, frameY, frameWidth, frame-
Height);
// (image, imageX, imageY, imageWidth,
imageHeight, canvasX, canvasY, canvas-
Width, canvasHeight)
curFrame++;
// update current frame
...
}
Demonstration
html5 canvas API 10
11. Demonstration
<video> & <canvas> elements brought to-
gether: create dynamic “buttons” for the movie
playback
timeline.onclick = function(e) {
var inputX = e.layerX - timeline.off-
setLeft;
// cursor’s X coordinate
var inputY = e.layerY - timeline.off-
setTop; // cursor’s Y coordinate
var clickedFrame = Math.floor(inputY/
frameHeight) * frameRows;
clickedFrame+= Math.floor(inputX/
frameWidth); // calculate which frame
is clicked
...
}
Demonstration
html5 canvas API 11
12. Sources
• Keith, J. (2010). html5 for web designers
• http://ln.hixie.ch/?start=1089635050&count=1
• Lubbers, P. et al. (2010). Pro HTML5 Programming:
Powerful APIs for Richer Internet Application Devel-
opment
• http://dev.w3.org/html5/2dcontext/
• http://en.wikipedia.org/wiki/Canvas_
element#Usage
• http://www.canvasdemos.com/
• http://diveintohtml5.org/canvas.html
• http://html5doctor.com/search/?q=canvas
• http://sixrevisions.com/html/canvas-element/
A simple drawing supposed to represent a spider web
made with Harmony canvas app • Matthew, D. (2010). HTML5: designing rich Inter-
net applications
• http://www.html5trends.com/
Sources
html5 canvas API 12
