[whatwg] Request: Canvas Tag CSS

[Greg Houston]

On Mon, Apr 7, 2008 at 3:35 PM, Thomas Broyer <t.broyer at gmail.com> wrote:

>  Your css() function could be written using the DOM-Level-2-Style, but
>  the easiest is to have elements with the styles you want and then use
>  getComputedStyle (as suggested by Anne)
>
>  <script>
>  var css = null;
>  if (getComputedStyle in window) {
>     css = function (id, prop) {
>         return window.getComputedStyle(document.getElementById(id))[prop];
>     }
>  } else {
>     // assume IE, with runtimeStyle
>     css = function(id, prop) {
>         return document.getElementById(id).runtimeStyle[prop];
>     }
>  }
>  </script>
>
>  <span id=myBoxStyleHolder class=myBox style=display:none></span>
>
>  <script>
>
> function drawBox() {
>     var ctx = canvas.getContext('2d');
>     ctx.clearRect(0, 0, 0, 0);
>     ctx.fillStyle = css("myBoxStyleHolder", "backgroundColor");
>
>     ctx.fillRect(0,0,25,25);
>  }
>  </script>
>
>
>  Your problem here is that fill-style is not a CSS property...
>
>
>  --
>  Thomas Broyer
>

Thomas,

Fill-style not being a CSS property may be a non-issue since as
Mathieu eluded, SVG has CSS Support, so many of the SVG CSS properties
might be used by Canvas.

Example SVG CSS properties:
http://developer.mozilla.org/en/docs/CSS:Getting_Started:SVG_graphics

stop-color
fill
stroke
stroke-width

Using getComputedStyle is not really an acceptable option. It's a hack
that would require polluting the DOM with elements that are being used
like some sort of proxy database.

Also, there is another way to get the CSS properties, though it seems
rather complex and funky; sorry for the non-technical term.
http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml

Imagine you had to use one of those two methods to style a paragraph.
It wouldn't be acceptable. It's way too complex.

Since SVG already has support for some of the basic CSS properties
that Canvas could use, it seems trivial to add UA support for
recognizing the following (with the quotes so it is not
mis-interpreted as a function):

ctx.fillStyle = 'css(myButton)';
ctx.lineWidth = 'css(myButton)';

If you want to make it easier on the UA, then it could use syntax
similar to your solution. Then the UA would not have to correlate
"fill-style" with "fillStyle". The previous syntax is much nicer. The
following syntax is workable.

ctx.fillStyle = 'css(rule, property)';
ctx.lineWidth = 'css(rule, property)';

- Greg