• Like
Canvas
Upcoming SlideShare
Loading in...5
×

Canvas

  • 20,552 views
Uploaded on

Talk about Canvas at Web Directions South ’09

Talk about Canvas at Web Directions South ’09

More in: Technology , Travel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Great Presentation!
    Just add to my favourited.

    --
    http://buynshopping.com
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
  • Great design, typography and use of photos in this presentation.
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
20,552
On Slideshare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
364
Comments
4
Likes
36

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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