Share my experience and tips related to HTML5 canvas

1. 10 things I’ve learned
when working with
HTML5 canvas
by François CREVOLA
Sept. 2016

2. Goals of this presentation
- 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 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. 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. 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. 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 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. 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. 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. 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. 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 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 !