title: Set background fill, stroke, and opacity of HTML5 Canvas
body: <p>I use the below code to set styles of <code>myCanvas</code>, but I am not able to set <code>fillStyle</code>. Yet, <code>strokeStyle</code> and <code>lineWidth</code> is working fine. Could anyone please help with this?</p>
  
  <pre><code>Init()
  {
       var can = byId('myCanvas');
  
          // get it's context
          hdc = can.getContext('2d');
  
          hdc.strokeStyle = 'red';
          hdc.lineWidth = 2;
  
          // Fill the path
          hdc.fillStyle = "#9ea7b8";
          hdc.opacity = 0.2;
          hdc.fill();
  }
  
  // And call the drawPoly function with coordinates.
  function drawPoly(coOrdStr) {
          var canvas = byId('myCanvas');
          hdc.clearRect(0, 0, canvas.width, canvas.height);
  
          var mCoords = coOrdStr.split(',');
          var i, n;
          n = mCoords.length;
          hdc.beginPath();
          hdc.moveTo(mCoords[0], mCoords[1]);
          for (i = 2; i &lt; n; i += 2) {
              hdc.lineTo(mCoords[i], mCoords[i + 1]);
          }
          hdc.lineTo(mCoords[0], mCoords[1]);
          hdc.stroke();
  
      }
  </code></pre>