Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

4,390 views

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

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.

×