Can I set a canvas fillStyle with a variable from css?

Question

How can I use css variables to set canvas colours?

Example:

<html>
  <head>
    <style>
:root {
  --color-bright:#ffca00;
  --color-bg:#40332e;
}

body {
  background-color: var(--color-bg);
  color: var(--color-bright);
}

    </style>
  </head>
  <body>
    <center>
      <div>
        <canvas id="loadingCanvas" oncontextmenu="event.preventDefault()" width="800" height="600"></canvas>
      </div>
    </center>

    This text is actually yellowish.

    <script type='text/javascript'>
      var loadingContext = document.getElementById('loadingCanvas').getContext('2d');
      var canvas = loadingContext.canvas;

      loadingContext.fillStyle = "rgb( 0, 0, 0 )";
      // Doesn't work (should be brown instead of black):
      loadingContext.fillStyle = "var(--color-bg)";
      loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);

      loadingContext.font = '30px sans-serif';
      loadingContext.textAlign = 'center'
      loadingContext.fillStyle = "rgb( 200, 200, 200 )";
      // Doesn't work (should be yellow instead of white):
      loadingContext.fillStyle = "var(--color-bright)";
      loadingContext.fillText("This text should be yellowish.", canvas.scrollWidth / 2, canvas.scrollHeight / 2);
    </script>
  </body>
</html>

As @kaiido has pointed out, my answer answers the specific problem in your example, but does not answer the general question. For your situation would you be able to set a color and background-color for the canvas? Then pick up those values (instead of the ones for body which just happen to work because of the way your example is set up). Still not a 'yes' to the general question but possibly a practical way forward for this problem. — A Haworth, Mar 06 '22 at 11:35
"set a color and background-color for the canvas" you mean like `canvas { color: var(--color-bright); }` in css? Maybe I could do that if I can set it on a specific canvas. [My real page has two canvases](https://github.com/Davidobot/love.js/blob/master/src/compat/index.html): one's for loading and the other displays a game. I guess that would be `#loadingCanvas { color: var(--color-bright); }`? — idbrii, Mar 07 '22 at 06:56
Yes. If you definitely want to use the CSS variables then @kaiido's answer is the one, and answers the question as set. I was thinking more of making it look like a 'real' CSS setting, so if you pick up the color from the CSS it works whether you've set it as a variable or as a specific color, e.g. color: red; I admit this is drifting away from your original question! but I thought it might be a bit more obvious what was happening for future maintenance purposes. — A Haworth, Mar 07 '22 at 07:23

Kaiido · Answer 1 · 2022-03-06T09:38:37.707

No you can't, at least not currently. I must admit that I'm not 100% certain if it should work or not, navigating the CSS parse a grammar is quite complex for me right now, but anyway, no browser supports it, so even if the specs actually were telling that it should work, the specs would be wrong (I'll investigate this further and maybe open an issue there).

Note that it is clear though that currentColor should work, and indeed it does in Firefox, but neither in Blink nor in WebKit, so better consider it unsupported.

What you can do however is to get the parsed value yourself, by calling getComputedStyle(context.canvas).getPropertyValue("--the-property"):

const loadingContext = document.getElementById('loadingCanvas').getContext('2d');
const canvas = loadingContext.canvas;

loadingContext.fillStyle = "rgb( 0, 0, 0 )";

loadingContext.fillStyle = getComputedStyle(canvas).getPropertyValue("--color-bg");
loadingContext.fillRect(0, 0, canvas.scrollWidth, canvas.scrollHeight);

loadingContext.font = '30px sans-serif';
loadingContext.textAlign = 'center'
loadingContext.fillStyle = "rgb( 200, 200, 200 )";

loadingContext.fillStyle = getComputedStyle(canvas).getPropertyValue("--color-bright");
loadingContext.fillText("This text should be yellowish.", canvas.scrollWidth / 2, canvas.scrollHeight / 2);

:root {
  --color-bright:#ffca00;
  --color-bg:#40332e;
}

body {
  background-color: var(--color-bg);
  color: var(--color-bright);
}

<canvas id="loadingCanvas" width="800" height="600"></canvas>

This text is actually yellowish.

Note that even if it did work the way you wanted, the value would be parsed only at setting of the property, so doing it this way works exactly the same, also, this obviously doesn't work for canvases that are not connected in the DOM.

Ps: Chrome and Safari actually do support setting the fillStyle to "currentColor", but only when the color is set as a direct color (no currentColor, nor var(--prop)), and when set as the canvas element's style attribute (not through a stylesheet nor inheritance). That's quite bad IMO, and I'll open a few issues to at least get this working.

Can I set a canvas fillStyle with a variable from css?

1 Answers1