Intro to HTML5 Canvas

4,051 views
3,979 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
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
4,051
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

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.

×