[whatwg] Request: Canvas Tag CSS

[Mathieu HENRI]

Greg Houston wrote:
> 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.

What you want is called SVG.
Although there is some overlap, Canvas serves another purpose.

> .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
> 


-- 
Mathieu 'p01' HENRI
JavaScript developer, Opera Software ASA