Html5 Canvas Drawing and Animation


Published on

Published in: Software
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html5 Canvas Drawing and Animation

  1. 1. Canvas5 Drawing and Animation HTML Presenter: Ashim Das, Mindfire Solutions Skype: mfsi_ashim Date: 13/11/2013
  2. 2. Reference
  3. 3. The Canvas Element
  4. 4. Use document.getElementById() to get a reference to canvas Call getContext('2d') on the canvas to get the graphics context Use the context to draw in the canvas
  5. 5. The Canvas API Canvas attributes width height Canvas methods getContext() toDataURL(type, quality) toBlob(callback, type, args...)
  6. 6. The Canvas Context Although the context provides 2d graphics context, the Canvas specification embraces other types of contexts as well; for example, a 3d context specification is already well underway. CanvasRenderingContext2D attributes canvas miterLimit fillStyle shadowBlur font shadowColor globalAlpha shadowOffsetX globalComposite-Operation shadowOffsetY lineCap strokeStyle lineWidth textAlign lineJoin textBaseline
  7. 7. Event Handling Mouse Events canvas.onmousedown = function(e) { //mouse down event reaction }; or canvas.addEventListener('mousedown', function(e) { //mouse down event reaction });
  8. 8. Event Handling Keyboard Events Key Events keydown keypress keyup var key = String.fromCharCode(event.which); Touch Events touchstart touchmove touchend touchcancel canvas.ontouchstart = function(e) {….....
  9. 9. Invisible HTML Elements Rubber band with a floating div Printing a canvas Using toDataURL() to print a canvas
  10. 10. Drawing
  11. 11. The Coordinate System
  12. 12. Transformation Translate Rotate Scale Create custom transformations, such as shear
  13. 13. The Drawing Model Draws the shape or image into an infinite, transparent bitmap, honoring the current fill, stroke, and line styles. Draws the shadow from the shape or image into a second bitmap, using the current context shadow settings. Multiplies every shadow pixel's alpha component by the globalAlpha property of the context. Composites the shadow bitmap into the canvas clipped to the clipping region, using the current composition. Multiplies every pixel for the shape or image by the globalAlpha property of the context. Composites the shape or image bitmap into the clipping region over the current canvas bitmap, using the current composition operator.
  14. 14. Drawing Rectangles clearRect(double x, double y, double w, double h) strokeRect(double x, double y, double w, double h) fillRect(double x, double y, double w, double h) Colors and Transparency
  15. 15. Gradients Linear Gradients createLinearGradient( double x0, double y0, double x1, double y1) Radial Gradients createRadialGradient( double x0, double y0, double r0, double x1, double y1, double r1)
  16. 16. Patterns createPattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image, DOMString repetition)
  17. 17. Shadows shadowColor: a CSS3 color shadowOffsetX: the horizontal offset in pixels from shape or text to the shadow shadowOffsetY: the vertical offset in pixels from shape or text to the shadow shadowBlur: a value, used in a Gaussian blur equation to smear the shadow Inset Shadows Negative values in OffSet
  18. 18. Paths, Stroking, and Filling
  19. 19. Cutouts
  20. 20. Lines moveTo(x, y) lineTo(x, y) Drawing a Grid
  21. 21. Rubberband Lines Dashed Lines
  22. 22. Line Caps and Joins
  23. 23. Arcs and Circles arc(x, y, radius, startAngle, endAngle, counterClockwise) Rubberband Circles Rounded Rectangles (the arcTo() method)
  24. 24. Dials and Gauges
  25. 25. Bezier Curves quadraticCurveTo(double cpx, double cpy, double x, double y) Rounded corners with bezier curves
  26. 26. Cubic Curves bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y, double x, double y)
  27. 27. Transformations rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Custom Transformations transform(double a, double b, double c, double d, double e, double f) setTransform(double a, double b, double c, double d, double e, double f)
  28. 28. Text
  29. 29. Methods rotate(double angleInRadians) scale(double x, double y) translate(double x, double y) Properties font textAlign textBaseline
  30. 30. Stroking and Filling Text
  31. 31. Text Patterns and Gradients
  32. 32. Setting Font Properties font-style font-variant font-weight font-size line-height font-family
  33. 33. Positioning Text textAlign textBaseline
  34. 34. Text around arcs
  35. 35. Text cursors
  36. 36. Animation
  37. 37. The requestAnimationFrame() method function animate(time) { // Update and draw animation objects requestAnimationFrame(animate); // Sustain the animation } ... requestAnimationFrame(animate); // Start the animation long window.requestAnimationFrame(FrameRequestCallback callback) void window.cancelRequestAnimationFrame(long handle)
  38. 38. Portable Animation loop The requestAnimationFrame() polyfill
  39. 39. Scrolling Backgrounds
  40. 40. Parallax
  41. 41. Timed Animation
  42. 42. Thank You