Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
10 things I’ve learned
when working with
HTML5 canvas
by François CREVOLA
Sept. 2016
Goals of this presentation
- Share experience acquired
- Give tips you may not already know
- Reafirming important facts t...
1, 2, 3, 4, 5…
1. Vector graphics are powerfull (even on a
bitmap canvas)
2. IE has the poorest canvas performance
3. Canv...
… 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 rein...
1. Vector graphics are powerfull
- Vector graphics are easy to resize (to any
level), rotate (any angle) and without any
l...
2. IE has the poorest canvas performance
- Benchmarks show that for the same
drawning task, IE is slower than other
browse...
3. Canvas is a transparent plane !
- Don’t erase your canvas by drawning a big
colored rectangle
- Canvas can be on top of...
4. Optimize / minimize area to repaint
- don’t redraw all canvas just to ‘move’ one
(little) element
- use clearRect() on ...
5. Browsers use GPU
- Optimize so that work is done by your
browser (instead of manually doing it by your
own javascript c...
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...
7. How to draw a colored polygon with
transparent hole.
- Draw the outer border clock-wise (CW)
- and draw the inner borde...
8. Do not reinvent wheel, use the right library
- many javascript library exists : choose the
one that do the job (example...
9. Javascript + canvas is more portable than
java applet
- Java applet are not compatible with Android
browser or IOS brow...
10. Decimal coordinates give nicer results
- unless you use imageSmoothingEnabled =
false you don’t need to use integer
co...
Upcoming SlideShare
Loading in …5
×

10 things I've learned when working with html5 canvas

151 views

Published on

Share my experience and tips related to HTML5 canvas

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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 !

×