Canvas

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

2 comments

Comments 1 - 2 of 2 previous next Post a comment

  • + timothymoore timothymoore 1 month ago
    Great design, typography and use of photos in this presentation.
  • + guest234ff4 c_walsh 1 month ago
    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.
Post a comment
Embed Video
Edit your comment Cancel

24 Favorites & 1 Event

Canvas - Presentation Transcript

  1. Canvas L5 FT W! H TM Web 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. api API 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); // 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;
  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 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";
  26. pixels Pixel Pushing
  27. 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);
  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 not Awesome?
  32. ugly API is ugly
  33. 1by1 Setting 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 way No 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 You dmitry@baranovskiy.com
  50. 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

+ Dmitry BaranovskiyDmitry Baranovskiy, 1 month ago

custom

9580 views, 24 favs, 39 embeds more stats

Talk about Canvas at Web Directions South ’09

More info about this document

© All Rights Reserved

Go to text version

  • Total Views 9580
    • 5125 on SlideShare
    • 4455 from embeds
  • Comments 2
  • Favorites 24
  • Downloads 117
Most viewed embeds
  • 3646 views on http://ajaxian.com
  • 519 views on http://www.webdirections.org
  • 87 views on http://brenelz.com
  • 77 views on http://www.extjs.com
  • 26 views on http://disole.wordpress.com

more

All embeds
  • 3646 views on http://ajaxian.com
  • 519 views on http://www.webdirections.org
  • 87 views on http://brenelz.com
  • 77 views on http://www.extjs.com
  • 26 views on http://disole.wordpress.com
  • 19 views on http://blogs.vinuthomas.com
  • 12 views on http://www.hanrss.com
  • 10 views on http://feeds.feedburner.com
  • 7 views on resource://brief-content
  • 7 views on http://tumblr.ignar.name
  • 6 views on http://localhost
  • 6 views on http://www.jordimir.com
  • 3 views on http://www.jpkeisala.com
  • 3 views on http://www.slideshare.net
  • 3 views on http://127.0.0.1:8795
  • 1 views on http://translate.googleusercontent.com
  • 1 views on http://to.test
  • 1 views on http://xss.yandex.net
  • 1 views on http://transfer
  • 1 views on http://10.0.1.218
  • 1 views on http://www.stupiddog.eu
  • 1 views on http://rss.mmckeon.com
  • 1 views on http://www.mirpod.com
  • 1 views on applewebdata://4F121044-5FCD-4788-9836-93D363709ED4
  • 1 views on http://www.webwag.com
  • 1 views on http://tweetree.com
  • 1 views on http://iskosalminen.com
  • 1 views on http://feed.bmaron.net
  • 1 views on http://www.bootstrap.co.kr
  • 1 views on http://www.rue89.com
  • 1 views on http://www.svtestsite.com
  • 1 views on http://extjs
  • 1 views on file://
  • 1 views on http://demos.theactivegroup.com
  • 1 views on http://www.ajaxian.com
  • 1 views on http://127.0.0.1
  • 1 views on applewebdata://2291BE42-A055-4C86-B201-FD0255D842DE
  • 1 views on http://127.0.0.1:1108
  • 1 views on http://ignar.name

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories

Groups / Events