Let's take a look at the HTML5 element canvas. See how you can draw shapes and images, manipulate single pixels and even animate it. Given as a lecture in the fh ooe in Hagenberg, Austria in December 2011.

1. HTML5 Canvas

5. The canvas is
a 2d bitmap.

6. No layers.
No undo.
No objects.
No moving stuff.

7. http://rawkes.com/lab/google-balls-logo

8. http://blog.nihilogic.dk/2008/04/javascript-wolfenstein-3d.html

9. How can I
create a
c anvas?

10. HTML
<canvas id="a">fallback txt</canvas>
JavaScript
var canvas =
document.getElementsById('a');
var ctx = canvas.getContext('2d');

11. I draw
s quares.

12. con text
ctx.fillStyle = 'blue'; he ight
ctx.fillRect(0, 0, 150, 50);
x y width
ctx.strokeStyle = '#c66';
ctx.lineWidth = 1;
ctx.strokeRect(0.5, 60.5, 150, 50);

13. Iwant to
d raw an
image!

14. create image
var img = new Image();
img.onload = function() { w hen loaded
ctx.drawImage(img, 0, 0);
}; x y
img.src = 'nakedrobot.png';
image url

15. how can you
draw text?

16. css p roperties
ctx.font = 'bold 40px sans-serif';
ctx.fillText('hello kitty', 5, 40);
x y
hello kitty

17. bring me
the pixels!

18. var w = canvas.width;
var h = canvas.height;
new image array
var img = ctx.createImageData(w, h);
for (var x = 0; x < w; x++) {
for (var y = 0; y < h; y++) {
// each pixel has four values
var idx = (x + y * w) * 4;
// 0 red, 1 green, 2 blue, 3 alpha
img.data[idx + 0] = x;
img.data[idx + 1] = 255-x;
img.data[idx + 2] = 0;
img.data[idx + 3] = 255;
}
} result
ctx.putImageData(img, 0, 0); write to canv
as

19. http://media.chikuyonok.ru/ambilight/

20. close pixealte
http://desandro.com/resources/close-pixelate/

21. A nimation
function ti
ck() {
doKeyboard(
);
updatePlaye
r();
doAI();
draw();
audio(); }
var fps = 3
0;
setInterval
(tick, 1000
/fps) ;

22. get
input
draw update
every 30ms

23. function tick() {
doKeyboard();
updatePlayer();
doAI();
draw();
audio();
}
var fps = 30;
setInterval(tick, 1000/fps);

24. How can
i Save an
Image?

25. var img = document.
getElementsByTagName('img')[0];
var canvasImg =
canvas.toDataURL("image/png");
returns “data:ima
ge/png;base64,
img.src = canvasImg; iVBORw0KGgoAAAA
NS
MgAAADICAYAAACt...” UhEU
canvas image

26. Browser
Support 67%

28. http://weavesilk.com/

29. Summary Canvas
<canvas> is a new 2d bitmap html element. you can draw primitives, images
and pixels. There are no layers or object. If a pixel gets a new color, the
old color is overwritten and lost.
A canvas is not “sandboxed” like flash and can be accessed and drawn on
with javascript.

30. Material Used
Banksy “Have a Break” http://www.flickr.com/photos/loungerie/4109421950/
Banksy “Flowing off” http://www.flickr.com/photos/loungerie/4109420324/
Banksy “They’re Coming” http://www.flickr.com/photos/97041449@N00/4115205218/
Bansky “Tourqay Robot” http://en.wikipedia.org/wiki/File:Banksy_Torquay_robot_crop.jpg
Banksy “You have got to be kidding me” http://www.banksy.co.uk/
Banksy “follow your Dream” http://www.flickr.com/photos/thomashawk/6343586111/
Banksy “nola” http://www.flickr.com/photos/eddiedangerous/3045255243/
Banksy “Flower Pollard Street” http://www.flickr.com/photos/eddiedangerous/1800573742/
Banksy “what are you looking at?” http://www.flickr.com/photos/nolifebeforecoffee/124659356/
Banksy “Man and Picture of a dog” http://www.flickr.com/photos/atomicshed/141462789/
Banksy “Anti-Capitalism for sale” http://www.flickr.com/photos/jcodysimms/246024687/

31. Material Used
3d teapot model http://resumbrae.com/ub/dms423_f08/10/
Metal Teapot http://www.flickr.com/photos/11273631@N08/2867342497/
furry teapot http://www.flickr.com/photos/11273631@N08/2867342461/
Television Icon http://thenounproject.com/noun/television/#icon-No416
Graphics Card http://www.flickr.com/photos/43779660@N00/218093887/
Banksy “under the Carpet” http://www.flickr.com/photos/acb/147223287/
Boxing http://www.flickr.com/photos/51035655711@N01/2826228569/