Using HTML Canvas for UI elements?

views:

464

answers:

+1 Q:

Using HTML Canvas for UI elements?

Hi,

I have a couple of UI elements such as buttons in my web application. I was going to use CSS3's transitions to animate the transition from one background-image to another. I figured out that it's not possible with the current transitions draft at least. So, I was wondering if it would make sense to use Canvas as the button. I'm sure it can handle events, so, I see no problems here. Are there any?

Other than the fact that it's not supported in IE, no.

Robusto 2010-03-23 15:56:22

canvas is not supported in Internet Explorer. Also, canvas animations render very slowly on PCs with little CPU power.

Unless you are writing something that is for a specific target audience (say internal users with Firefox and dual-core cpu) I think you should avoid using canvas for now...

Nir Levy 2010-03-23 16:14:35

you can still get canvas in IE via http://excanvas.sourceforge.net/

kodisha 2010-03-23 17:40:08

Disagree. I've written my own button class using canvas, and it isn't slow. The slowest part of canvas element right now is fillRect()ing to clear the canvas, and if your button's different states all have the same type of alpha mask, you don't even have to clear. If hes rendering the button nonstop, even when the button's state hasnt changed, thats a reason for it to be slow.

ItzWarty 2010-03-24 19:16:00

I came to conclusion: using Canvas for UI elements is not a good idea.

For example, if you create a select-box using Canvas, how is the list going to appear in the top of other HTML elements?

rFactor 2010-03-27 17:18:02

Use raphael.js (MIT license) - it give you canvas-like API using SVG (and VML for IE) and works in all amjor browsers including IE6. And its fast (not too slow even in IE)

plodder 2010-03-28 00:35:41

ansaurus

tags:

views:

answers:

Using HTML Canvas for UI elements?

related questions