[whatwg] Request: Canvas Tag CSS

[Thomas Broyer]

On Mon, Apr 7, 2008 at 9:08 PM, Greg Houston wrote:
> >  What if some script changes the rules?
> >  Do you want the UA to infer the dependencies
> >  and redraw the whole picture?
> >  Canvas is an imperative element, and that is on purpose.
> >  You want to mix a declarative mechanism in.  That is bad style.
> >
> >  Chris
>
> No. The UA would not redraw the canvas.
>
>
> We have a CSS rule:
> .myBox {
>      fill-style: rgba(255,0,0,1);
> }
>
> We have a function:
> function drawBox() {
>       var ctx = canvas.getContext('2d');
>       ctx.clearRect(0, 0, 0, 0);
>       ctx.fillStyle = css(myBox);
>       ctx.fillRect(0,0,25,25);
> }
>
> We run the function:
> drawBox(); // Draws a red square.
>
> ...
>
> Later the CSS rule is changed, either via the DOM or through the
> addition of a new style sheet that trumps the first rule.
>
> .myBox {
>      fill-style: rgba(0,255,0,1);
> }
>
> The next time the application runs drawBox(), this value is used and
> the box is green.

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