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
– A Haworth, Commented Mar 6, 2022 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: one's for loading and the other displays a game. I guess that would be #loadingCanvas { color: var(--color-bright); }? — idbrii
– idbrii, Commented Mar 7, 2022 at 6: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
– A Haworth, Commented Mar 7, 2022 at 7:23
Similar if not the same Q: stackoverflow.com/questions/29675279/… — Computer says 'no'--SOooooo
– Computer says 'no'--SOooooo, Commented Aug 8 at 0:33

Kaiido · Accepted Answer · 2022-03-06 09:38:37Z

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.

Egor Kiryanov · Accepted Answer · 2024-12-02 20:16:11Z

1

getComputedStyle(document.body).getPropertyValue("--your-color")

answered Dec 2, 2024 at 20:16

Egor Kiryanov

392 bronze badges

2 Comments

Jeremy Caney Over a year ago

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Computer says 'no'--SOooooo Aug 8 at 0:40

A working fiddle of this idea can be found e.g. here codesandbox.io/p/sandbox/…

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related