Your SlideShare is downloading. ×
Intro to HTML5 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

Intro to HTML5 Canvas

3,697
views

Published on

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

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,697
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
1
Likes
3
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. Intro to HTML5 Canvas Juho Vepsäläinen
  • 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. CanvasOverview
  • 4. http://dev.w3.org/html5/2dcontext/ Just Google it. :)
  • 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. Markup <canvas></canvas> <canvas width="800" height="600"></canvas><canvas width="800" height="600">No canvas for you!</canvas>
  • 7. Element AccessAttributes: width, heightMethod: getContext (for drawing), toDataURL (forsaving)
  • 8. Show some apps and libs now.
  • 9. Canvas 2D Context The Beefcake
  • 10. Get Some Contextvar canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");
  • 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. Context for Dummies1. Set some states (transformation, color, ie.)2. Draw (lines, whatnot)3. ???4. Profit
  • 13. Default Context (0, 0) xy
  • 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. Compositingctx.globalAlpha = 0.38; ctx.globalCompositeOperation = "source-over";
  • 16. Colors and Styles - stroke/ fillctx.strokeStyle = "black"; ctx.fillStyle = "yellow";
  • 17. Colors and Styles - Gradientsctx.createLinearGradient(x0,y0,x1,y1) ctx.createRadialGradient(x0,y0,r0,x1,y1,r1) ctx.addColorStop(offset, color);
  • 18. Colors and Styles - Patterns ctx.createPattern(catImg, repeat-x);
  • 19. Line Caps/Joinsctx.lineWidth = 12;ctx.lineCap = "square";ctx.lineJoin = "miter";ctx.miterLimit = 10;
  • 20. Shadowsctx.shadowOffsetX = 5;ctx.shadowOffsetY = 5;ctx.shadowBlur = 3;ctx.shadowColor = grey;
  • 21. Rectanglesctx.clearRect/fillRect/strokeRect(x,y,w,h)
  • 22. Pathsctx.beginPath();ctx.moveTo(x, y); // initial pos// define curvectx.lineTo/quadraticCurveTo/bezierCurveTo/ arcTo/arc/rect...ctx.closePath();ctx.fill/stroke/clip();
  • 23. Textctx.font = "24px sans-serif ";ctx.textAlign = "center";ctx.fillText/strokeText(text,x,y,maxWidth);
  • 24. Drawing Images ctx.drawImage(img/canvas/video, lots of alternatives);Supports compositing! Use this to your advantage.
  • 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. Canvas TricksFor Fun and Profit
  • 27. Blurred LinesBasic idea: Use line shadow, offset actual line so that it isnt visible.
  • 28. Multiple LayersBasic idea: CSS z-index + absolute positioning.
  • 29. ErasingBasic idea: Use destination-out compositing op.
  • 30. CSS FunBasic idea: Play around with CSS opacityand transformations (incurs perf penalty).
  • 31. Canvas DemosTo recap concepts discussed
  • 32. Demo time.