Canvas
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Canvas

  • 25,136 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
25,136
On Slideshare
16,323
From Embeds
8,813
Number of Embeds
52

Actions

Shares
Downloads
364
Comments
4
Likes
36

Embeds 8,813

http://ajaxian.com 5,422
http://www.webdirections.org 2,529
http://brenelz.com 204
http://disole.wordpress.com 135
http://www.jpkeisala.com 106
http://www.extjs.com 77
http://www.slideshare.net 72
http://swik.net 67
http://blogs.vinuthomas.com 62
http://ignar.name 17
http://tumblr.ignar.name 17
http://www.hanrss.com 12
http://feeds.feedburner.com 11
http://www.jordimir.com 9
resource://brief-content 7
http://bootstrap.co.kr 6
http://blog.ignar.name 6
http://localhost 6
http://translate.googleusercontent.com 4
http://www.brenelz.com 3
http://127.0.0.1:8795 3
http://www.linkedin.com 3
http://webcache.googleusercontent.com 2
http://localhost:2453 2
http://192.168.6.52 2
https://www.linkedin.com 2
http://www.bootstrap.co.kr 2
http://static.slideshare.net 1
http://rss.mmckeon.com 1
http://elhornonoestapabollos.blogspot.com 1
http://www.stupiddog.eu 1
http://feed.bmaron.net 1
http://velidea.com 1
http://translate.yandex.net 1
http://10.0.1.218 1
http://iskosalminen.com 1
http://www.rue89.com 1
http://www.svtestsite.com 1
http://extjs 1
file:// 1
http://demos.theactivegroup.com 1
http://www.ajaxian.com 1
http://127.0.0.1 1
applewebdata://2291BE42-A055-4C86-B201-FD0255D842DE 1
http://127.0.0.1:1108 1
http://www.webwag.com 1
http://www.mirpod.com 1
http://transfer 1
applewebdata://4F121044-5FCD-4788-9836-93D363709ED4 1
http://to.test 1

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