title: Set Canvas strokeStyle color from a CSS property?
body: <p>In our Angular2 / Ionic 2 project we have a HTML Canvas element that can be drawn on. <strong>How can I set the Canvas strokeStyle property using a color provided by a CSS style?</strong></p>
  
  <p>Below is a snippet of the draw function. Is it possible to set the <code>context.strokeStyle</code> property to a value retrieved from CSS?</p>
  
  <pre><code>draw = function () {
              context.clearRect(0, 0, self.canvas.nativeElement.width, self.canvas.nativeElement.height);
              context.strokeStyle = "#000";
              context.lineJoin = "round";
              context.lineWidth = 5;
              for (var i = 0; i &lt; clickX.length; i++) {
                  context.beginPath();
                  if (clickDrag[i] &amp;&amp; i) {
                      context.moveTo(clickX[i - 1], clickY[i - 1]);
                  } else {
                      context.moveTo(clickX[i] - 1, clickY[i]);
                  }
                  context.lineTo(clickX[i], clickY[i]);
                  context.closePath();
                  context.stroke();
              }
              self.canvasEmpty.emit(self.isCanvasEmpty());
          },
  </code></pre>
  
  <p>My original thought was to assign a CSS class to the <code>canvas</code> tag with the <code>color</code> property set. Then I would retrieve the value of the <code>color</code> property from <code>self.canvas.nativeElement</code>. However, no CSS styles are available when I inspect <code>self.canvas.nativeElement</code> using Chrome Web Inspector tools.</p>