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
