[whatwg] Request: Canvas Tag CSS

Greg Houston gregory.houston at gmail.com
Mon Apr 7 12:08:29 PDT 2008

>  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);

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.

Changing style values like this and then redrawing the canvas later is
common practice with Canvas animations. I don't see a problem. The
application might run .myBox 10ms later, 10 minutes later, or never,
but when it does it will look to the CSS for the fill-style.


More information about the whatwg mailing list