[whatwg] Request: Canvas Tag CSS

[Greg Houston]

I didn't know SVG had CSS support. That's great, but I fail to see your point.

A table serves a different purpose than a div, yet both are styled in the CSS.

A paragraph serves a different purpose than an image, yet both are
styled in the CSS.

A blockquote serves a different purpose than a submit button, yet both
are styled in the CSS.

SVG and Canvas serve different purposes, yet the both have style, and
both should be supported by CSS.


On Mon, Apr 7, 2008 at 3:41 AM, Mathieu HENRI <p01 at opera.com> wrote:
> 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
>