..

Referencing CSS custom properties in a <canvas>

Updated on Fri Dec 25 2020

<style>
  :root {
    --my-color: #f00;
  }
</style>

<canvas id="my-canvas"></canvas>

<script>
  const canvasElement = document.getElementById('my-canvas')
  const ctx = canvasElement.getContext('2d')
  ctx.fillStyle = window.getComputedStyle(document.documentElement).getPropertyValue('--my-color')
  ctx.fillRect(10, 10, 150, 100)
</script>

Thanks for the tip, @edokoa!

Edit on GitHub Admin