[whatwg] Request: Canvas Tag CSS

[Greg Houston]

1. The CSS would not validate.

2. Developers exchange code on the web, via tutorials, snippets,
templates and so forth. If there is no standard, then one developer
may write a CSS rule for Canvas like:

.myButton {
      fillStyle: LinearGradient(0,0,0,30) ColorStop(0, '#00ABEB')
ColorStop(0.5, '#fff');
      lineWidth: 1;
      shadowColor: #000;
      shadowBlur: 5;
      fillRect: 0, 0, 100, 30;
}

.myButtonHighlight {
      fillStyle: rgba(255, 255, 255 , 0.5);
      fillRect: 2, 2, 96, 13;
}

And another may write something like:

.myButton {
      fill-style: linearGradient(0,0,0,30) colorStops(0, '#00ABEB',
0.5, '#fff');
      line-width: 1;
      shadow-color: #000;
      shadow-blur: 5;
      fill-rect: 0, 0, 100, 30;
}

.myButtonHighlight {
      fill-style: rgba(255, 255, 255 , 0.5);
      fill-rect: 2, 2, 96, 13;
}

Each developer has to re-invent the wheel, adding extra complexity to
their code, where it could be done once in a standard and exchangeable
way by the UA.

3. Someone makes a template for an application. A designer then wishes
to theme it. Looking at the CSS, the designer see all these CSS rules
they are unfamiliar with. They think, okay, I will go to W3C and see
what they are, but then they find nothing. Then they think, I'll do a
search on the web, but then find nothing.

Why add rounded corners to the CSS specification? You can do the same
thing with images. Why add any new feature to a specification? To make
it easier, more intuitive, and standard.

- Greg

On Sun, Apr 6, 2008 at 10:10 AM, Anne van Kesteren <annevk at opera.com> wrote:
> On Sun, 06 Apr 2008 10:49:01 +0200, Greg Houston <gregory.houston at gmail.com>
> 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.
> >
>
>  Since <canvas> uses the <color> production from CSS why does a global
> search and replace through JavaScript files and CSS files not suffice?
>
>  Alternatively, you could use getComputedStyle() to get the color values
> from your CSS file.
>
>
>  --
>  Anne van Kesteren
>  <http://annevankesteren.nl/>
>  <http://www.opera.com/>
>