Your SlideShare is downloading. ×
0
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Canvas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Canvas

20,856

Published on

Talk about Canvas at Web Directions South ’09

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,856
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
368
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

×