[whatwg] Request: Canvas Tag CSS

Greg Houston gregory.houston at gmail.com
Tue Apr 8 02:37:21 PDT 2008


>  The Canvas element itself can be styled with CSS ( borders, size, outlines,
> background, ... ) but what is done in the CanvasContext does not end up in
> the DOM tree and therefore their styling can not be affected using CSS.
>
>
>  --
>
>  Mathieu 'p01' HENRI
>  JavaScript developer, Opera Software ASA
>

Between Anne, Thomas and I, we have clearly shown that the individual
shapes within a <canvas> element can indeed be effected by CSS at the
time of their rendering and re-rendering(such as in an animation).
Please refer to the other posts in this thread.

I have proposed a solution that greatly simplifies effecting canvas
shapes with CSS. Anne and Thomas have offered two work-arounds, one of
which is rather complex, and the other is a strange hack and only
slightly less complex.

There is no question at this point of whether my solution will work or
not. It will. Now it is simply a matter of interest. Is the benefit
worth the extra time required by the UA's to implement it? I think so.
It does not seem it would be a major endeavor for the UAs. They just
see the following lines, and return the the correct property value. If
the rule and property is defined in two or more stylesheets, the
property in the rule of the last stylesheet in the array of
stylesheets trumps those that came before.

ctx.fillStyle = 'css(myButton, fill-style)';
ctx.lineWidth = 'css(myButton, line-width)';
lineargradient.addColorStop(0,'css(firstStop, color-stop)');

- Greg



More information about the whatwg mailing list