Successfully reported this slideshow.
Your SlideShare is downloading. ×

10 things I've learned when working with html5 canvas

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 14 Ad
Advertisement

More Related Content

Similar to 10 things I've learned when working with html5 canvas (20)

Recently uploaded (20)

Advertisement

10 things I've learned when working with html5 canvas

  1. 1. 10 things I’ve learned when working with HTML5 canvas by François CREVOLA Sept. 2016
  2. 2. Goals of this presentation - Share experience acquired - Give tips you may not already know - Reafirming important facts to not forget about canvas
  3. 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. 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. 5. 1. Vector graphics are 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. 6. 2. IE has the 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. 7. 3. Canvas is a 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. 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. 9. 5. Browsers use GPU - 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. 10. 6. How to add 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. 11. 7. How to draw a colored polygon with transparent hole. - Draw the outer border clock-wise (CW) - and draw the inner border counter-clock-wise (CCW)
  12. 12. 8. Do not reinvent 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. 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. 14. 10. Decimal coordinates give 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 !

×