title: Animate progressively drawn dashed line HTML5 Canvas & Jquery
body: <p>how can I modify the following code so that the line drawn is dashed, you can see it in action in the jfiddle provided. </p>
  
  <pre><code>&lt;html&gt;
      &lt;style&gt;
          #canvas
          {
          border-style:solid;
          border-width:1px;
          }
      &lt;/style&gt;
      &lt;div id="canvas"&gt; 
          &lt;p&gt;Hover over me&lt;/p&gt;        
      &lt;/div&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  
  $(function() {
  
      animateLine = function(canvas, hoverDivName, colorNumber, pathString) {
          $('#' + hoverDivName).hover(
  
          function() {
              var line = canvas.path(pathString).attr({
                  stroke: colorNumber
              });
              var length = line.getTotalLength();
  
              $('path[fill*="none"]').animate({
                  'to': 1
              }, {
                  duration: 5000,
                  step: function(pos, fx) {
                      var offset = length * fx.pos;
                      var subpath = line.getSubpath(0, offset);
                      canvas.clear();
                      canvas.path(subpath).attr({
                          stroke: colorNumber
                      });
  
                  },
              });
          }, function() {
              $('path[fill*="none"]').stop(true, false).fadeOut();
          });
      };
  
      var canvas = Raphael('canvas', 200, 200);
      var pathString = "M10 10L10 200L100 200Z";
  
      animateLine(canvas, "canvas", "#000", pathString);
  
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/eA8bj/" rel="noreferrer">http://jsfiddle.net/eA8bj/</a></p>