Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

37

Share

Download to read offline

Canvas

Download to read offline

Talk about Canvas at Web Directions South ’09

Canvas

  1. Canvas L5 FT W! H TMWeb 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
  3. Teenager of web technologies
  4. Awesome What is Awesome? !
  5. Draw!You can draw!
  6. apiAPI is small & simple
  7. HTML5 HTML 5
  8. HTML5 HTML5
  9. Howto? How to…
  10. JavaScript
  11. Context Context
  12. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d");
  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. var a = context.globalAlpha;context.globalAlpha = a * 0.5;var b = context.globalCompositeOperation;context.globalCompositeOperation = "xor";
  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. 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. primiti Primitives ve
  18. context.clearRect(x, y, width, height);context.fillRect(x, y, width, height);context.strokeRect(x, y, width, height);
  19. paths Paths
  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. text Text
  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. images Images
  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. 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. pixelsPixel Pushing
  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. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]};
  29. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]};
  30. var data = { width: 100, height: 100, data: [0, 0, 0, 0, 255, 128, 0, 255, … , 0]}; R G B A
  31. not!What is notAwesome?
  32. uglyAPI is ugly
  33. 1by1Setting attributes one by one
  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. context.setAttr({ lineWidth: 2, lineCap: "round", lineJoin: "bevel", miterLimit: 5, shadowColor: "#000", shadowOffsetX: 0, shadowOffsetY: 3, shadowBlur: 7});
  36. pain!Coding paths is painful
  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. 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. 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. no wayNo way to store path
  41. more!Not enough primitives
  42. support Bad support
  43. 89%
  44. 81%
  45. 76%
  46. 74%
  47. Zero
  48. HTML 5
  49. Thank Youdmitry@baranovskiy.com
  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
  • williammdavis

    Feb. 5, 2017
  • nothingforever061

    Jun. 19, 2016
  • mduart

    Jul. 21, 2014
  • muralikrishnanpb

    Sep. 3, 2013
  • mahersaif

    Feb. 9, 2012
  • arunkrishnans

    Feb. 8, 2012
  • sulei00227

    Oct. 11, 2011
  • jaxiinofea

    May. 22, 2011
  • lvterry

    Dec. 13, 2010
  • Sarah1986

    May. 28, 2010
  • ipadnine

    May. 28, 2010
  • LeaVerou

    Apr. 21, 2010
  • charliez

    Apr. 12, 2010
  • toafu

    Feb. 4, 2010
  • alexsandro_xpt

    Dec. 11, 2009
  • cfleschhut

    Nov. 10, 2009
  • hblank

    Nov. 4, 2009
  • monad

    Oct. 30, 2009
  • rgaidot

    Oct. 19, 2009
  • rnella01

    Oct. 19, 2009

Talk about Canvas at Web Directions South ’09

Views

Total views

30,281

On Slideshare

0

From embeds

0

Number of embeds

8,988

Actions

Downloads

383

Shares

0

Comments

0

Likes

37

×