0
Intro to HTML5 Canvas       Juho Vepsäläinen
Gonna Talk About These  Topics You BetchaCanvas (Overview)Canvas 2D Context (The Beefcake)Canvas Tricks (For Fun and Profit...
CanvasOverview
http://dev.w3.org/html5/2dcontext/        Just Google it. :)
DefinitionImmediate-mode API and associated utility methods   for drawing two-dimensional vector graphics             to a ...
Markup                     <canvas></canvas>       <canvas width="800" height="600"></canvas><canvas width="800" height="6...
Element AccessAttributes: width, heightMethod: getContext (for drawing), toDataURL (forsaving)
Show some apps and libs now.
Canvas 2D Context    The Beefcake
Get Some Contextvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
Context FunctionalityIts a state machineRead-only ref back to canvas (attr)save/restore + opsOps: transformations, composi...
Context for Dummies1. Set some states (transformation, color, ie.)2. Draw (lines, whatnot)3. ???4. Profit
Default Context    (0, 0)                     xy
Transformed Context    (0, 0)                                            x         ctx.scale(x, y)         ctx.rotate(rad)...
Compositingctx.globalAlpha = 0.38;          ctx.globalCompositeOperation = "source-over";
Colors and Styles - stroke/           fillctx.strokeStyle = "black";                             ctx.fillStyle = "yellow";
Colors and Styles -               Gradientsctx.createLinearGradient(x0,y0,x1,y1)                ctx.createRadialGradient(x...
Colors and Styles - Patterns    ctx.createPattern(catImg, repeat-x);
Line Caps/Joinsctx.lineWidth = 12;ctx.lineCap = "square";ctx.lineJoin = "miter";ctx.miterLimit = 10;
Shadowsctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.shadowBlur = 3;ctx.shadowColor = grey;
Rectanglesctx.clearRect/fillRect/strokeRect(x,y,w,h)
Pathsctx.beginPath();ctx.moveTo(x, y); // initial pos// define curvectx.lineTo/quadraticCurveTo/bezierCurveTo/    arcTo/arc...
Textctx.font = "24px sans-serif ";ctx.textAlign = "center";ctx.fillText/strokeText(text,x,y,maxWidth);
Drawing Images ctx.drawImage(img/canvas/video, lots of alternatives);Supports compositing! Use this to your advantage.
Pixel Manipulation  ctx.createImageData/getImageData/putImageData  var data = ctx.getImageData(0, 0, w, h);  var realData ...
Canvas TricksFor Fun and Profit
Blurred LinesBasic idea: Use line shadow, offset actual line            so that it isnt visible.
Multiple LayersBasic idea: CSS z-index + absolute positioning.
ErasingBasic idea: Use destination-out compositing op.
CSS FunBasic idea: Play around with CSS opacityand transformations (incurs perf penalty).
Canvas DemosTo recap concepts discussed
Demo time.
Upcoming SlideShare
Loading in...5
×

Intro to HTML5 Canvas

3,768

Published on

Brief introduction to HTML5 Canvas. Libs: https://github.com/bebraw/jswiki/wiki (multimedia, graphics). Demos: http://jsdo.it/bebraw/codes

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,768
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
46
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Intro to HTML5 Canvas"

  1. 1. Intro to HTML5 Canvas Juho Vepsäläinen
  2. 2. Gonna Talk About These Topics You BetchaCanvas (Overview)Canvas 2D Context (The Beefcake)Canvas Tricks (For Fun and Profit)Canvas Demos (To Recap Concepts Discussed)
  3. 3. CanvasOverview
  4. 4. http://dev.w3.org/html5/2dcontext/ Just Google it. :)
  5. 5. DefinitionImmediate-mode API and associated utility methods for drawing two-dimensional vector graphics to a raster drawing area. Draw and forget API and utils for 2D drawing.
  6. 6. Markup <canvas></canvas> <canvas width="800" height="600"></canvas><canvas width="800" height="600">No canvas for you!</canvas>
  7. 7. Element AccessAttributes: width, heightMethod: getContext (for drawing), toDataURL (forsaving)
  8. 8. Show some apps and libs now.
  9. 9. Canvas 2D Context The Beefcake
  10. 10. Get Some Contextvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
  11. 11. Context FunctionalityIts a state machineRead-only ref back to canvas (attr)save/restore + opsOps: transformations, compositing, colors and styles,line caps/joins, shadows, rects, paths, text, drawingimages, pixel manipulation + misc. crud I wont cover
  12. 12. Context for Dummies1. Set some states (transformation, color, ie.)2. Draw (lines, whatnot)3. ???4. Profit
  13. 13. Default Context (0, 0) xy
  14. 14. Transformed Context (0, 0) x ctx.scale(x, y) ctx.rotate(rad) ctx.translate(x, y)y ctx.transform/setTransform(a,b,c,d,e,f) (set resets)
  15. 15. Compositingctx.globalAlpha = 0.38; ctx.globalCompositeOperation = "source-over";
  16. 16. Colors and Styles - stroke/ fillctx.strokeStyle = "black"; ctx.fillStyle = "yellow";
  17. 17. Colors and Styles - Gradientsctx.createLinearGradient(x0,y0,x1,y1) ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) ctx.addColorStop(offset, color);
  18. 18. Colors and Styles - Patterns ctx.createPattern(catImg, repeat-x);
  19. 19. Line Caps/Joinsctx.lineWidth = 12;ctx.lineCap = "square";ctx.lineJoin = "miter";ctx.miterLimit = 10;
  20. 20. Shadowsctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.shadowBlur = 3;ctx.shadowColor = grey;
  21. 21. Rectanglesctx.clearRect/fillRect/strokeRect(x,y,w,h)
  22. 22. Pathsctx.beginPath();ctx.moveTo(x, y); // initial pos// define curvectx.lineTo/quadraticCurveTo/bezierCurveTo/ arcTo/arc/rect...ctx.closePath();ctx.fill/stroke/clip();
  23. 23. Textctx.font = "24px sans-serif ";ctx.textAlign = "center";ctx.fillText/strokeText(text,x,y,maxWidth);
  24. 24. Drawing Images ctx.drawImage(img/canvas/video, lots of alternatives);Supports compositing! Use this to your advantage.
  25. 25. Pixel Manipulation ctx.createImageData/getImageData/putImageData var data = ctx.getImageData(0, 0, w, h); var realData = data.data; for(var y = 0, pos = 0; y < h; y++) { for(var x = 0; x < w; x++, pos+=4) { realData[pos + 2] *= 0.5; // modify Blue channel } } data.data = realData;Friggin slow! Avoid if possible. Optimize usage.
  26. 26. Canvas TricksFor Fun and Profit
  27. 27. Blurred LinesBasic idea: Use line shadow, offset actual line so that it isnt visible.
  28. 28. Multiple LayersBasic idea: CSS z-index + absolute positioning.
  29. 29. ErasingBasic idea: Use destination-out compositing op.
  30. 30. CSS FunBasic idea: Play around with CSS opacityand transformations (incurs perf penalty).
  31. 31. Canvas DemosTo recap concepts discussed
  32. 32. Demo time.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×