[whatwg] Request: Canvas Tag CSS

Mathieu HENRI p01 at opera.com
Tue Apr 8 04:28:34 PDT 2008

Thomas Broyer wrote:
> On Tue, Apr 8, 2008 at 11:37 AM, Greg Houston wrote:
>>  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).
> "at the time of their rendering" is the key. You cannot they are
> "affected by CSS", it's just that your script reads the current
> property value from a stylesheet and uses it to draw the shapes.
> "Affected by CSS" would mean (at least that's my interpretation)
> reacting to CSS changes

This is one of the reasons for the "C" in CSS. Further and/or higher 
changes must cascade and affect the document.

> (document.styleSheets[0].cssRules[0].style.color = "black"; or simply
> selecting an alternate stylesheet from your browsers "view" menu).
> Maybe you could say "initialized from CSS"...

>>  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.
> Anne also proposed you the Simplest Thing That Could Possibly Work:
> use search/replace in both CSS and JS.
> Want to change #123456 into #567890? search #123456 and replace with #567890.
> I understand what you're asking for, I just don't see the need, as it
> seems to me it'll do more harm than good: as soon as designers will
> start to style your canvas using CSS, they'll start using properties
> that you don't "support" in your drawing script.
> I mean, as Matthieu said, canvas is imperative while CSS is
> declarative, so most of CSS cannot be used with canvas. The only thing
> you can do is read values from the CSS and use them in your canvas
> script.

This is screaming over-engineering. There is a standard to do that, and 
more, already and it's called SVG.

> In my opinion, you'd rather have a script consisting only of variable
> definitions (à la *.ini or *.properties files) and have your designers
> only update this file (and never touch nor even see the script
> responsible for the actual drawing).
> Also, given than there are multiple ways of solving the problem
> (including ones allowing you to read values from CSS), I suggest
> pushing the debate to a later <canvas> version.
> In brief, if you really want to style diagrams using CSS, use SVG, or
> just don't complain that doing it with <canvas> is tricky.

Mathieu 'p01' HENRI
JavaScript developer, Opera Software ASA

More information about the whatwg mailing list