title: Changing Pen Color on Canvas after draw
body: <p>I'm trying to change the color of the contents of the canvas after it is drawn. So if you start drawing a green circle, you could then decide later to make your previously drawn circle into a red a circle. </p>
  
  <p>I'm using the signaturePad plugin here:
  <a href="https://github.com/szimek/signature_pad" rel="nofollow">https://github.com/szimek/signature_pad</a></p>
  
  <p>I have some of the functionality built, but the pen color change doesn't change previously drawn elements. Here's a fiddle:
  <a href="http://jsfiddle.net/Z6g5Z/" rel="nofollow">http://jsfiddle.net/Z6g5Z/</a></p>
  
  <p>Thanks for your help! The fiddle is prob. the best way to see the issue, but the JS and markup are below.</p>
  
  <pre><code>var canvas = $("#can")[0];
  var signaturePad = new SignaturePad(canvas, {
      minWidth: 2,
      maxWidth: 5,
      penColor: "rgb(66, 133, 244)"
  });
  
  $('#clear').click(function(){
      signaturePad.clear();
  });
  
  $('.global-color li').click(function(){
      $('.on').removeClass('on');
      var $t = $(this);
      $t.addClass('on');
      var selectedColor = $t.data('color');
      signaturePad.penColor = hexToRgb(selectedColor);
  });
  
  
  &lt;ul class="global-color"&gt;
      &lt;li class="yellow-pick" data-color="#f8c90d"&gt;yellow&lt;/li&gt;
      &lt;li class="green-pick" data-color="#3dae49"&gt;green&lt;/li&gt;
      &lt;li class="orange-pick" data-color="#e87425"&gt;orange&lt;/li&gt;
      &lt;li class="blue-pick on" data-color="#009cc5"&gt;blue&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div&gt;
      &lt;input id="clear" type="button" value="clear" /&gt;
  &lt;/div&gt;
  &lt;canvas id="can" width="200px" height="200px"&gt;&lt;/canvas&gt;
  </code></pre>