How to style canvas elements with CSS

Question

I have a lot of figures and elements drawn in the a HTML canvas. All of them have different colors, strokes, etc. I really don't like that all these values are wandering in my JS code as some styles are in the CSS and some are in the code.

Does somebody know a good way to define the styles in CSS and read the styles when actually rendering the objects?

Here is some example of what I need to do:

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = 'green'; // I'd like to set with CSS
context.fill();
context.lineWidth = 5; // I'd like to set with CSS
context.strokeStyle = '#003300'; // I'd like to set with CSS
context.stroke();

http://jsfiddle.net/nedyalkov/ysgLqqh3/1/

Answer 1

I'm a bit late for the party but I just had the same scenario and I solved it like this:

// "Cache"
var classColors = {};

function getColor(className) {
    // Check for the color
    if (!classColors[className]) {

        // Create an element with the class name and add it to the dom
        $c = $('<div class="' + className + '"></div>').css('display', 'none');
        $(document.body).append($c);

        // Get color from dom and put it in the color cache
        classColors[className] = $c.css('color');

        // Remove the element from the dom again
        $c.remove();
    }

    // Return color
    return classColors[className];
}

I only needed the color but you can extend the cache object to hold more than color if you want. The you'd return a full object from the function. The below code is not tested at all:

var classProperties = {};

function getPropeties(className) {
    // Check for the properties object
    if (!classProperties[className]) {

        // Create an element with the class name and add it to the dom
        $c = $('<div class="' + className + '"></div>').css('display', 'none');
        $(document.body).append($c);

        // Get needed stuff from the dom and put it in the cache
        // P.S. Didn't test if canvas names are the same as css names.
        // If not you'll have to translate it
        classProperties[className] = {
            fillStyle: $c.css('color'),
            lineWidth: $c.css('border-width'),
            strokeStyle: $c.css('border-style')
        }

        // Remove the element from the dom again
        $c.remove();
    }

    // Return properties
    return classProperties[className];
}

Answer 2

Normally, people who draw a lot of stuff in a canvas will make their own shape objects with style properties. For example: http://jsfiddle.net/b93cc3ww/

context = document.getElementById("myCanvas").getContext("2d");

function Rectangle(params) {
    this.x = params.x || 0;
    this.y = params.y || 0;
    this.width = params.width || 0;
    this.height = params.height || 0;
    this.fillStyle = params.fillStyle || "#FFFFFF";
    this.strokeStyle = params.strokeStyle || "#000000";
    this.lineWidth = params.lineWidth || 0;
}

Rectangle.prototype.draw = function () {
    if (this.fillStyle) {
        context.fillStyle = this.fillStyle;
        context.fillRect(this.x, this.y, this.width, this.height)
    }
    if (this.strokeStyle && this.lineWidth) {
        context.strokeStyle = this.strokeStyle;
        context.lineWidth = this.lineWidth;
        context.strokeRect(this.x, this.y, this.width, this.height);
    }
}

rectangles = [
    new Rectangle({
        x: 10,
        y: 10,
        width: 300,
        height: 150,
        fillStyle: "#FF0000"
    }),
    new Rectangle({
        x: 250,
        y: 10,
        width: 100,
        height: 80,
        fillStyle: "#00FF00",
        strokeStyle: "#00AA00",
        lineWidth: 5
    }),
    new Rectangle({
        x: 10,
        y: 200,
        width: 250,
        height: 80,
        strokeStyle: "#FF0000",
        lineWidth: 1
    })
]

for (var i = 0; i < rectangles.length; ++i) {
    rectangles[i].draw();
}

If you like the way CSS works, you could make a shape object which can take a "class" parameter and then store a list of "clases" in an array at the top of your code.

Answer 3

CSS has a certain scope to it, that is, it only acts on HTML elements. Javascript, on the other hand, has its own variables and can also interact with HTML elements. What you're trying to do is use CSS as variables for javascript, which can't be done.

The code sample above represents a piece of javascript which takes an HTML element (in this case a canvas) and performs a set of actions (methods) on it. What you're doing is literally drawing one line at a time to create your image, and this image is outside of the CSS scope as it is only defined by the elements internal properties, while CSS can only define its external (specifically, visual) properties.

Answer 4

A bit late to the game, but I think this is still useful so I created a jQuery free version of the accepted answer:

var classProperties = {};

function getPropeties(className)
{
  if (true === classProperties[className]) {
    return classProperties[className];
  }

  // Create an element with the class name and add it to the dom
  let element = document.createElement('div');
  element.style.display = 'none;'
  element.classList.add(className);
  document.body.appendChild(element);

  // Get needed stuff from the dom and put it in the cache
  let compStyles = window.getComputedStyle(element);

  classProperties[className] = {
    fill: compStyles.backgroundColor,
    lineWidth: compStyles.borderWidth,
    stroke: compStyles.borderColor
  }
  // Remove the element from the dom again
  element.remove();

  return classProperties[className];
}

Additionally, since I suffered through this: If you want to use this inside Vue you have to wait for the whole view to be mounted, otherwise there is a chance for the styles to not return the computed styles properly due to a race condition. See https://v2.vuejs.org/v2/api/#mounted for the necessary code.

I am certain this can be a problem for any vanilla JS code as well, when executed before the CSS is loaded.