Your SlideShare is downloading. ×
0
Canvas                                L5 FT W!                            H TMWeb Directions               South 2009   Dm...
“The canvas element represents a!resolution-dependent bitmap  canvas, which can be used for rendering graphs, game graphic...
Teenager of web  technologies
Awesome  What is Awesome?   !
Draw!You can draw!
apiAPI 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, ...
var a = context.globalAlpha;context.globalAlpha = a * 0.5;var b = context.globalCompositeOperation;context.globalComposite...
context.strokeStyle = "#fc0";context.fillStyle = "#000";var gradient = context.createLinearGradient(x1, y1, x2,y2);// orva...
context.lineWidth = 2;context.lineCap = "round";context.lineJoin = "bevel";context.miterLimit = 5;context.shadowColor = "#...
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)...
text Text
context.font = italic 400 12px/2 Palatino, »Georgia, serif;context.textAlign = "center";context.textBaseline = "middle";co...
images  Images
var image = new Image;image.onload = function () {    context.drawImage(image, x, y);    // or    context.drawImage(image,...
sy                yvar image = new Image;image.onload = sx                function () {                           sh      ...
pixelsPixel Pushing
var data = context.createImageData(w, h);// orvar data = context.createImageData(old_data);var data = context.getImageData...
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 notAwesome?
uglyAPI is ugly
1by1Setting attributes one by one
context.lineWidth = 2;context.lineCap = "round";context.lineJoin = "bevel";context.miterLimit = 5;context.shadowColor = "#...
context.setAttr({    lineWidth: 2,    lineCap: "round",    lineJoin: "bevel",    miterLimit: 5,    shadowColor: "#000",   ...
pain!Coding paths is painful
context.beginPath();context.moveTo(x, y);context.lineTo(x, y);context.quadraticCurveTo(cpx, cpy, x, y);context.bezierCurve...
context.beginPath()    .moveTo(x, y)    .lineTo(x, y)    .quadraticCurveTo(cpx, cpy, x, y)    .bezierCurveTo(c1x, c1y, c2x...
var path = ["move", x, y,            "line", x, y,            "quadratic", cpx, cpy, x, y,            "arc", x, y, radius,...
no wayNo way to store path
more!Not enough primitives
support  Bad support
89%
81%
76%
74%
Zero
HTML 5
Thank Youdmitry@baranovskiy.com
Thank YouPhotos used in this presentation:http://www.flickr.com/photos/garryknight/2390411392/http://www.flickr.com/photos...
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Upcoming SlideShare
Loading in...5
×

Canvas

20,894

Published on

Talk about Canvas at Web Directions South ’09

Published in: Technology, Travel
4 Comments
36 Likes
Statistics
Notes
  • Great Presentation!
    Just add to my favourited.

    --
    http://buynshopping.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • You could always create a jQuery plugin/wrapper that allows you to use the canvas API in the way described on slides 44 and 47.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great design, typography and use of photos in this presentation.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Thanks Dmitry for an awesome presentation! Programmers and those who actually watched this presentation at WDS09 will know that you can't actually do what is in slides 44 and 47, but Dmitry reckons we should badger the W3C in to making it work that way. It's hard to disagree really.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
20,894
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
368
Comments
4
Likes
36
Embeds 0
No embeds

No notes for slide

Transcript of "Canvas"

  1. 1. Canvas L5 FT W! H TMWeb Directions South 2009 Dmitry Barano vskiy
  2. 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
  3. 3. Teenager of web technologies
  4. 4. Awesome What is Awesome? !
  5. 5. Draw!You can draw!
  6. 6. apiAPI is small & simple
  7. 7. HTML5 HTML 5
  8. 8. HTML5 HTML5
  9. 9. Howto? How to…
  10. 10. JavaScript
  11. 11. Context Context
  12. 12. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
  13. 13. 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);
  14. 14. var a = context.globalAlpha;context.globalAlpha = a * 0.5;var b = context.globalCompositeOperation;context.globalCompositeOperation = "xor";
  15. 15. context.strokeStyle = "#fc0";context.fillStyle = "#000";var gradient = context.createLinearGradient(x1, y1, x2,y2);// orvar 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;
  16. 16. context.lineWidth = 2;context.lineCap = "round";context.lineJoin = "bevel";context.miterLimit = 5;context.shadowColor = "#000";context.shadowOffsetX = 0;context.shadowOffsetY = 3;context.shadowBlur = 7;
  17. 17. primiti Primitives ve
  18. 18. context.clearRect(x, y, width, height);context.fillRect(x, y, width, height);context.strokeRect(x, y, width, height);
  19. 19. paths Paths
  20. 20. 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);
  21. 21. text Text
  22. 22. 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;
  23. 23. images Images
  24. 24. 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";
  25. 25. sy yvar 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";
  26. 26. pixelsPixel Pushing
  27. 27. var data = context.createImageData(w, h);// orvar data = context.createImageData(old_data);var data = context.getImageData(x, y, w, h);context.putImageData(data, dx, dy);// orcontext.putImageData(data, dx, dy, x, y, w, h);
  28. 28. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]};
  29. 29. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]};
  30. 30. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]}; R G B A
  31. 31. not!What is notAwesome?
  32. 32. uglyAPI is ugly
  33. 33. 1by1Setting attributes one by one
  34. 34. context.lineWidth = 2;context.lineCap = "round";context.lineJoin = "bevel";context.miterLimit = 5;context.shadowColor = "#000";context.shadowOffsetX = 0;context.shadowOffsetY = 3;context.shadowBlur = 7;
  35. 35. context.setAttr({ lineWidth: 2, lineCap: "round", lineJoin: "bevel", miterLimit: 5, shadowColor: "#000", shadowOffsetX: 0, shadowOffsetY: 3, shadowBlur: 7});
  36. 36. pain!Coding paths is painful
  37. 37. 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();
  38. 38. 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();
  39. 39. 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();
  40. 40. no wayNo way to store path
  41. 41. more!Not enough primitives
  42. 42. support Bad support
  43. 43. 89%
  44. 44. 81%
  45. 45. 76%
  46. 46. 74%
  47. 47. Zero
  48. 48. HTML 5
  49. 49. Thank Youdmitry@baranovskiy.com
  50. 50. Thank YouPhotos 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×