10 things I've learned when working with html5 canvas
0 likes232 views
1. The document shares tips and lessons learned from working with HTML5 canvas. It discusses 10 key points including how vector graphics are powerful for canvas, Internet Explorer has the poorest canvas performance, and canvas acts as a transparent plane. 2. Some tips include optimizing the area to be repainted to improve performance, using built-in browser functions to leverage the GPU, and saving canvas images with toDataURL(). 3. Additional insights include how to draw colored polygons with transparent holes by drawing outer and inner borders in different directions, using libraries to avoid reinventing solutions, and how JavaScript with canvas is more portable than Java applets.
10 things I've learned when working with 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 !