10 things I've learned when working with html5 canvas

10 things I've learned when working with html5 canvas

• 1.
  10 things I’velearned when working with HTML5 canvas by François CREVOLA Sept. 2016
• 2.
  Goals of thispresentation - Share experience acquired - Give tips you may not already know - Reafirming important facts to not forget about canvas
• 3.
  1, 2, 3,4, 5… 1. Vector graphics are powerfull (even on a bitmap canvas) 2. IE has the poorest canvas performance 3. Canvas is a transparent plane ! 4. Optimize / minimize area to repaint 5. Browsers use GPU
• 4.
  … 6, 7,8, 9, 10. 6. How to add a “Save image as …” 7. How to draw a colored polygon with transparent hole. 8. Do not reinvent wheel, use the right library 9. Javascript + canvas is more portable than java applet 10. Decimal coordinates give nicer results
• 5.
  1. Vector graphicsare powerfull - Vector graphics are easy to resize (to any level), rotate (any angle) and without any loss of quality - Vector graphics are low-sized - Can be generated by algorithm
• 6.
  2. IE hasthe poorest canvas performance - Benchmarks show that for the same drawning task, IE is slower than other browser. - If you game / app / demo is running smoothly in IE, you can be sure that it will run nicely with Safari, Firefox and Chrome.
• 7.
  3. Canvas isa transparent plane ! - Don’t erase your canvas by drawning a big colored rectangle - Canvas can be on top of other elements of your Html page (for exemple you can animate needles on top of a watch background) - Canvas can even be on top of other canvas (can be a way to optimize by separating
• 8.
  4. Optimize /minimize area to repaint - don’t redraw all canvas just to ‘move’ one (little) element - use clearRect() on the minimum possible area (instead of the whole canvas), then redraw only that part. - exemple : move a sprite by erasing rect of old sprite position, then redraw at new position (handle sprite background in
• 9.
  5. Browsers useGPU - Optimize so that work is done by your browser (instead of manually doing it by your own javascript code), which in turn will use GPU for better performance. - Use canvas built-in function for zoom, clipping, transform, rotate, ...
• 10.
  6. How toadd a “Save image as …” // save canvas image as data url (png format by default) and set this data avec src of a classic img html element var data = canvas.toDataURL(); document.getElementById('pict').src = data; NOTE : Today, major browsers have a context menu “Save image as …” on canvas.
• 11.
  7. How todraw a colored polygon with transparent hole. - Draw the outer border clock-wise (CW) - and draw the inner border counter-clock-wise (CCW)
• 12.
  8. Do notreinvent wheel, use the right library - many javascript library exists : choose the one that do the job (example: clipper.js helped me working on polygons) - many framework designed specifically for canvas
• 13.
  9. Javascript +canvas is more portable than java applet - Java applet are not compatible with Android browser or IOS browser - Java applet are considered obsolete - Javascript and canvas don’t need any browser plugin
• 14.
  10. Decimal coordinatesgive nicer results - unless you use imageSmoothingEnabled = false you don’t need to use integer coordinates - browsers will nicely smooth pixel for the given coordinates : it’s perfectly ok to draw a lineTo a floating point coordinate !