[whatwg] Request: Canvas Tag CSS

[Greg Houston]

Having worked with the canvas tag quite a bit now, I've found that it
is a bit awkward that the canvas tag is not taking advantage of CSS.
If you are changing your site design, perhaps you want to change the
colors used in your line graphs as well. So you make the changes in
your CSS for the majority of your elements, which is rather painless,
and then for the canvas tag you then have to start digging through the
JavaScript to make your changes.

Say you are using the canvas tag to create buttons with a border and a
gradient. It would be nice to be able to change that gradient, and the
border size and color in the CSS. Maybe you are theming a site that is
using canvas elements. You are not comfortable with fooling with the
javascript, but if the basic shapes had CSS rules you might be a bit
more confident in making style changes.


.myCanvas {
	background-color: #fff;
	width: 90px;
	height: 30px;
}

.myButton {
	fillStyle: rgba(0,255,0,1);
	lineWidth: 1;
	shadowColor: #000;
	shadowBlur: 5;
}

.myGradient {
	fillStyle: LinearGradient(0,0,0,30) ColorStop(0, '#00ABEB')
ColorStop(0.5, '#fff');
}

.myImage {
	fillStyle: Pattern(/images/myimage.jpg) repeat;
}


ctx.fillStyle = 'css(myButton)';
ctx.strokeStyle = 'css(myButton)';

...

ctx.fillStyle =  'css(myGradient)';


Thanks for considering.

-Greg