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

“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

Teenager of web
technologies

Awesome
What is
Awesome? !

Draw!
You can draw!

api API is small &
simple

HTML5
HTML 5

HTML5
HTML5

Howto?
How to…

JavaScript

Context
Context

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

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);

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

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;

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

primiti
Primitives
ve

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

paths
Paths

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);

text
Text

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;

images
Images

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";

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";

pixels
Pixel Pushing

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);

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

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

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

not!
What is not
Awesome?

ugly
API is ugly

1by1 Setting attributes one by
one

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

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

pain!
Coding paths is painful

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();

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();

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();

no way No way to
store path

more!
Not enough primitives

support
Bad support

89%

81%

76%

74%

Zero

HTML 5

Thank You
dmitry@baranovskiy.com

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