Talk about Canvas at Web Directions South ’09

1. Canvas
L5 FT W!
H TM
Web Directions
South 2009
Dmitry Barano
vskiy

2. “The canvas element represents
a!resolution-dependent bitmap
canvas, which can be used for
rendering graphs, game graphics,
or other visual images on the fly”
HTML 5 Specification

4. Teenager of web
technologies

7. Awesome
What is
Awesome? !

9. Draw!
You can draw!

10. api
API is small & simple

11. HTML5
HTML 5

12. HTML5
HTML5

16. Howto?
How to…

18. JavaScript

19. Context
Context

20. var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d");

21. context.save();
context.restore();
context.scale(x, y);
context.rotate(angle);
context.translate(x, y);
context.transform(m11, m12, m21, m22, dx, dy);
context.setTransform(m11, m12, m21, m22, dx, dy);

22. var a = context.globalAlpha;
context.globalAlpha = a * 0.5;
var b = context.globalCompositeOperation;
context.globalCompositeOperation = "xor";

23. context.strokeStyle = "#fc0";
context.fillStyle = "#000";
var gradient = context.createLinearGradient(x1, y1, x2,
y2);
// or
var gradient = context.createRadialGradient(x1, y1, r1,
x2, y2, r2);
gradient.addColorStop(0 / 6, "red");
gradient.addColorStop(1 / 6, "orange");
gradient.addColorStop(2 / 6, "yellow");
gradient.addColorStop(3 / 6, "green");
gradient.addColorStop(4 / 6, "blue");
gradient.addColorStop(5 / 6, "navy");
gradient.addColorStop(6 / 6, "purple");
context.fillStyle = gradient;

24. context.lineWidth = 2;
context.lineCap = "round";
context.lineJoin = "bevel";
context.miterLimit = 5;
context.shadowColor = "#000";
context.shadowOffsetX = 0;
context.shadowOffsetY = 3;
context.shadowBlur = 7;

25. primiti
Primitives
ve

26. context.clearRect(x, y, width, height);
context.fillRect(x, y, width, height);
context.strokeRect(x, y, width, height);

27. paths
Paths

28. context.beginPath();
context.closePath();
context.moveTo(x, y);
context.lineTo(x, y);
context.quadraticCurveTo(cpx, cpy, x, y);
context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);
context.arcTo(x1, y1, x2, y2, radius);
context.arc(x, y, radius, startAngle, endAngle,
anticlockwise);
context.rect(x, y, width, height);
context.fill();
context.stroke();
context.clip();
context.isPointInPath(x, y);

29. text
Text

30. context.font = 'italic 400 12px/2 Palatino, »
Georgia, serif';
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("Web Directions", 100, 120);
context.strokeText("Canvas FTW", 100, 150, 140);
var metrics = context.measureText("How wide is »
this text?"),
width = metrics.width;

31. images
Images

32. var image = new Image;
image.onload = function () {
context.drawImage(image, x, y);
// or
context.drawImage(image, x, y, w, h);
// or
context.drawImage(image, sx, sy, sw, sh,
x, y, w, h);
};
image.src = "graffiti.jpg";

33. sy y
var image = new Image;
image.onload = sx
function () {
sh x h
context.drawImage(image, x, y);
// or
sw w
context.drawImage(image, x, y, w, h);
// or
context.drawImage(image, sx, sy, sw, sh,
x, y, w, h);
};
image.src = "graffiti.jpg";

34. pixels
Pixel Pushing

35. var data = context.createImageData(w, h);
// or
var data = context.createImageData(old_data);
var data = context.getImageData(x, y, w, h);
context.putImageData(data, dx, dy);
// or
context.putImageData(data, dx, dy, x, y, w, h);

36. var data = {
width: 100,
height: 100,
data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};

37. var data = {
width: 100,
height: 100,
data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};

38. var data = {
width: 100,
height: 100,
data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]
};
R G B A

39. not!
What is not
Awesome?

41. ugly
API is ugly

42. 1by1
Setting attributes one by one

43. context.lineWidth = 2;
context.lineCap = "round";
context.lineJoin = "bevel";
context.miterLimit = 5;
context.shadowColor = "#000";
context.shadowOffsetX = 0;
context.shadowOffsetY = 3;
context.shadowBlur = 7;

44. context.setAttr({
lineWidth: 2,
lineCap: "round",
lineJoin: "bevel",
miterLimit: 5,
shadowColor: "#000",
shadowOffsetX: 0,
shadowOffsetY: 3,
shadowBlur: 7
});

45. pain!
Coding paths is painful

46. context.beginPath();
context.moveTo(x, y);
context.lineTo(x, y);
context.quadraticCurveTo(cpx, cpy, x, y);
context.bezierCurveTo(c1x, c1y, c2x, c2y, x, y);
context.arcTo(x1, y1, x2, y2, radius);
context.arc(x, y, radius, startAngle, endAngle,
anticlockwise);
context.rect(x, y, width, height);
context.closePath();
context.fill();

47. context.beginPath()
.moveTo(x, y)
.lineTo(x, y)
.quadraticCurveTo(cpx, cpy, x, y)
.bezierCurveTo(c1x, c1y, c2x, c2y, x, y)
.arcTo(x1, y1, x2, y2, radius)
.arc(x, y, radius, startAngle, endAngle,
anticlockwise)
.rect(x, y, width, height)
.closePath()
.fill();

48. var path = ["move", x, y,
"line", x, y,
"quadratic", cpx, cpy, x, y,
"arc", x, y, radius, startAngle,
endAngle, anticlockwise];
context.path(path).close().fill();
context.path(["move", 10, 10, "line", 50,
50]).close().fill();

49. no way
No way to store path

50. more!
Not enough primitives

53. support
Bad support

55. 89%

56. 81%

57. 76%

58. 74%

59. Zero

60. HTML 5

62. Thank You
dmitry@baranovskiy.com

63. Thank You
Photos used in this presentation:
http://www.flickr.com/photos/garryknight/2390411392/
http://www.flickr.com/photos/livenature/233281535/
http://www.flickr.com/photos/yoadolescente/3212368604/
http://www.flickr.com/photos/andreassolberg/433734311/
http://www.flickr.com/photos/cassidy/67331975/
http://www.flickr.com/photos/b-tal/93425807/
http://www.flickr.com/photos/pefectfutures/163853250/
http://www.flickr.com/photos/streetart-berlin/3746020273/
http://www.flickr.com/photos/streetart-berlin/3954856553/
http://www.flickr.com/photos/streetart-berlin/3947360186/
http://www.flickr.com/photos/streetart-berlin/3949549099/
http://www.flickr.com/photos/streetart-berlin/3949546871/
http://www.flickr.com/photos/streetart-berlin/3926942710/
http://www.flickr.com/photos/streetart-berlin/3834021290/
dmitry@baranovskiy.com