More native look and feel with HTML5 canvas

Cases, advantages, issues and solutions

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

Why?

Why not HTML?

HTML Node - is heavy to render object.

● Designed for advanced layouts, sometimes it is useless and harmful

● CSS● Legacy properties, logic

Why canvas?

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

Why canvas?

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

Cases

Typical cases

Responsible components with transformation of many objects.

DOM exampleCANVAS example

Typical cases

DOM interface decoration with animated objects.

DOM exampleCANVAS example

Typical cases

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

Your case?

Anti-cases

AnticasesSmall amount of objects without transforms or transitions / animations are enought.

Anticases

Your objects have to include content with advanced layout.

And much more...

CANVAS is not a silver bullet for HTML perfomance...

Big canvas - bad canvas?

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.

Canvas UI development issues

Because of previous issue - you`ll need batch assets resizing for different screen sizes.

Canvas UI development issuesUsing large universal engines seems to be wrong way sometimes.

There is space for your own wheel.

Questions?

Thanks =)

Denis RadinPixelsCommander.com

Special thanks to FlashJS engine - www.flashjs.com