title: How to change the fillStyle of a canvas element using javascript or jquery?
body: <p>I have some html5 canvas code to make an image, the current fillstyle is green, but when I link is clicked, it should change to red, but it's not working. How do I fix this? thanks</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html&gt;  
   &lt;head&gt;  
      &lt;script&gt;
          window.onload = function() {
  
  
              var canvas = document.getElementById('myCanvas');
              var context  = canvas.getContext('2d');  
  
              context.fillStyle = "rgb(0,200,0)";  
              context.fillRect (0, 0, 608, 105);  
  
              var img = new Image();  
              img.src = 'Round Borders.png';  
              context.drawImage(img,0,0);  
  
  
              var dataURL = canvas.toDataURL();
              document.getElementById("canvasImg").src = dataURL;
  
  
          };
  
    &lt;/script&gt;  
  
    &lt;script type="text/javascript"&gt;
          function change_bg_color(val) {
              document.getElementById('myCanvas').getContext('2d').fillStyle = val;
          }
    &lt;/script&gt;
  
   &lt;/head&gt;  
   &lt;body onmousedown="return false;"&gt;
     &lt;canvas id="myCanvas" width="608" height="105" style="display:none;"&gt;&lt;/canvas&gt;  
     &lt;img id="canvasImg" title="Right click to save me!"&gt;
     &lt;br/&gt;
     &lt;a href="#" onclick="change_bg_color('rgb(200,0,0)');"&gt;change to red&lt;/a&gt;
   &lt;/body&gt;  
  &lt;/html&gt; 
  </code></pre>