[whatwg] Request: Canvas Tag CSS

[Charles Pritchard]

On Sun, 6 Apr 2008, Greg Houston wrote:
> >
> > Having worked with the canvas tag quite a bit now, I've found that it is
> > a bit awkward that the canvas tag is not taking advantage of CSS. If you
> > are changing your site design, perhaps you want to change the colors
> > used in your line graphs as well. So you make the changes in your CSS
> > for the majority of your elements, which is rather painless, and then
> > for the canvas tag you then have to start digging through the JavaScript
> > to make your changes.

On Thu, 30 Apr 2009, Ian Hickson wrote:

> For simple things, e.g. colours or fonts, you can use getComputedStyle()
> on the <canvas> itself to get styles from the CSS, and use those in the JS
> instead of hardcoding the values. But this doesn't work as a general
> solution for multiple colours, gradients, etc.
>
> It's not clear to me how to solve this problem in general, e.g. for things
> like gradients and patterns, where CSS doesn't really match the way canvas
> works. Short of inventing a bunch of new syntax, I don't know what to do.

If you want to declare gradients, using available standards,
the SVG name space supports both gradient types. And in your
Canvas code you can reconstruct them with minimal effort.

HTML5 at least admits the existence of SVG. You can
embed an SVG fragment [or reference] in your HTML for various styling
reasons,
to support a Canvas without actually using SVG for display / rendering.
See the <defs> tag. Useful for Glyphs (embedded font), Gradients and
Filter graphs.


-Charles