This document discusses the advantages of using the HTML5 canvas over DOM elements for rendering UI components. It notes that canvas allows rendering many objects with a single interface more easily than DOM, similar to event delegation. Typical use cases for canvas include components with transformed objects and DOM decoration with animations. However, canvas is not always preferable, such as for layouts with advanced content. Frameworks may be needed for sprite handling and other canvas tasks, and resizing assets for different screens can be an issue.

1. More native look and feel
with HTML5 canvas
Cases, advantages, issues and solutions

2. How to compare DOM and CANVAS?
We will use FlashJS engine.
It have CANVAS and DOM renderers, so we
can launch same code in both ways.
flashjs.com

3. Why?

4. Why not HTML?
HTML Node - is heavy
to render object.
● Designed for advanced
layouts, sometimes it is
useless and harmful
● CSS
● Legacy properties, logic

5. Why canvas?
One DOM interface - unlimited number of
objects, so much more easier to render.

6. Why canvas?
Using canvas for UI components rendering is
very close to event delegation - you delegate
not only events but rendering as well.

7. Cases

8. Typical cases
Responsible components with transformation of
many objects.
DOM example
CANVAS example

9. Typical cases
DOM interface decoration with animated
objects.
DOM example
CANVAS example

10. Typical cases
For example - you`ll need to draw timelines like
this with DOM. How many DIVs will you need?

11. ?
Your case

12. Anti-cases

13. Anticases
Small amount of objects without transforms or
transitions / animations are enought.

14. Anticases
Your objects have
to include content
with advanced layout.

15. And much more...
CANVAS is not a silver bullet for HTML
perfomance...

16. Big canvas - bad canvas?

17. Frameworks
Probably you`ll need easy to use interfaces for
sprites, animations, scales, nested objects and
much more, but HTML5 canvas API is too low
level thing - you`d better to use frameworks.

18. Canvas UI development issues
Because of previous issue - you`ll need batch
assets resizing for different screen sizes.

19. Canvas UI development issues
Using large universal engines
seems to be wrong way sometimes.
There is space for
your own wheel.

20. ?
Questions

21. Thanks =)
Denis Radin
PixelsCommander.com
Special thanks to FlashJS
engine - www.flashjs.com