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

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>

CodePudding user response：

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.

CodePudding user response：

Yes you can.

You have set the background-color and the color of body to these values so use getComputedStyle on body to find out what their actual values are and use those.

<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" style="color: var(--color-bg);"></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 )";
    //It is brown now// Doesn't work (should be brown instead of black):
    loadingContext.fillStyle = window.getComputedStyle(document.body).backgroundColor; //"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 IT IS NOW!
    loadingContext.fillStyle = window.getComputedStyle(document.body).color; //"var(--color-bright)";
    loadingContext.fillText("This text should be yellowish.", canvas.scrollWidth / 2, canvas.scrollHeight / 2);
  </script>
</body>

</html>