JSFiddle - React, Tailwind, and code Playground

by Paul Smith

HTML

<canvas></canvas>

CSS

.myStyle {
  color:#fff000;
  }

JavaScript

var ctx = document.querySelector("canvas").getContext("2d");

function colorFromCSSClass(className) {
  var tmp = document.createElement("div"), color;
 // tmp.style.cssText = "position:fixed;left:-100px;top:-100px;width:1px;height:1px";
  tmp.className = className;
  document.body.appendChild(tmp);  // required in some browsers
  color = getComputedStyle(tmp).getPropertyValue("color");
  document.body.removeChild(tmp);
  return color
}

// alter color in style-sheet to alter stroke color
ctx.fillStyle = colorFromCSSClass("myStyle");
//ctx.lineWidth = 5;
ctx.arc(150, 75, 70, 0, 6.28);
ctx.fill();