Interface design with canvas

Question

Do you know of any document or tutorial to make HTML5's canvas drawn interfaces?

I'm thinking of a layered structure, one for the main app interface and other for popups, menus, etc, working with several canvas objects and dynamically manipulating them, but i found it lacks flexibility (for example, what if i want a non rectangular layer/canvas?).

The truth is i'm new to canvas and new to complex interface design and i need some text to get started in understanding this kind of tasks.

Help would be really appreciated! Thanks!

Answer 1

While canvas has lots of potential, I’m not sure you’d really want to use it to make an interface, as any text drawn is no longer text, and therefore invisible to assistive technology and Google.

Authors should not use the canvas element in a document when a more suitable element is available. For example, it is inappropriate to use a canvas element to render a page heading: if the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typically h1) and then styled using CSS and supporting technologies such as XBL.

(from WhatWG HTML spec)

Sorry it’s not a more helpful answer :) Btw what are you hoping to get from canvas that, say, jQuery doesn’t offer?