Interface design with canvas

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

I'm thinking开发者_Go百科 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!

---

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?

---

Check out Mocha UI, or the upcoming MooTools Art library. Both use canvas to create some standard UI elements. There are others out there as well.

---

I'm not sure the best way to find a good step by step example of a UI rendered completely using canvas, but the best references you'll probably find is Mozilla's, or barring that, their actual tutorial

As far as using layered, non-rectangular canvases, you might find a variety of implementation issues there, and you're kind of asking for implementation of a system that was not meant to be used in such a way. To put it simply: you're asking to cram a round peg in a square hole.

From a semantic point of view, the canvas is potentially an invisible block container, so anything you draw in the canvas can hint at a non-rectangular view if you scale the container correctly. If you want to imitate the way full-screen flash sites work, you can actually have your entire view rendered in one large scalable canvas, which while rectangular would only really limit you to the square shape of the browser window.

If you want to use a variety of canvases for individual elements, you can still layer them on top of each other, but your best bet is to make sure those views do not interfere with each other.

My next bit of advice is to check out Processing.js to get a feel for libraries that allow you to automate some of the drawing, animation, and interactivity of elements dynamically rendered in the canvas object.

I hope that helps! If you have other specific questions, like how to make a certain popup or element appear in your site the way you want, feel free to come back and ask that.