dashed-canvas.js

   1 /**
   2  * @license
   3  * Copyright 2012 Dan Vanderkam (danvdk@gmail.com)
   4  * MIT-licensed (http://opensource.org/licenses/MIT)
   5  */
   6
   7 /**
   8  * @fileoverview Adds support for dashed lines to the HTML5 canvas.
   9  *
  10  * Usage:
  11  *   var ctx = canvas.getContext("2d");
  12  *   ctx.installPattern([10, 5])  // draw 10 pixels, skip 5 pixels, repeat.
  13  *   ctx.beginPath();
  14  *   ctx.moveTo(100, 100);  // start the first line segment.
  15  *   ctx.lineTo(150, 200);
  16  *   ctx.lineTo(200, 100);
  17  *   ctx.moveTo(300, 150);  // start a second, unconnected line
  18  *   ctx.lineTo(400, 250);
  19  *   ...
  20  *   ctx.stroke();          // draw the dashed line.
  21  *   ctx.uninstallPattern();
  22  *
  23  * This is designed to leave the canvas untouched when it's not used.
  24  * If you never install a pattern, or call uninstallPattern(), then the canvas
  25  * will be exactly as it would have if you'd never used this library. The only
  26  * difference from the standard canvas will be the "installPattern" method of
  27  * the drawing context.
  28  */
  29
  30 CanvasRenderingContext2D.prototype.installPattern = function(pattern) {
  31   if (typeof(this.isPatternInstalled) !== 'undefined') {
  32     throw "Must un-install old line pattern before installing a new one.";
  33   }
  34   this.isPatternInstalled = true;
  35
  36   var dashedLineToHistory = [0, 0];
  37
  38   // list of connected line segements:
  39   // [ [x1, y1], ..., [xn, yn] ], [ [x1, y1], ..., [xn, yn] ]
  40   var segments = [];
  41
  42   // Stash away copies of the unmodified line-drawing functions.
  43   var realBeginPath = this.beginPath;
  44   var realLineTo = this.lineTo;
  45   var realMoveTo = this.moveTo;
  46   var realStroke = this.stroke;
  47
  48   this.uninstallPattern = function() {
  49     this.beginPath = realBeginPath;
  50     this.lineTo = realLineTo;
  51     this.moveTo = realMoveTo;
  52     this.stroke = realStroke;
  53     this.uninstallPattern = undefined;
  54     this.isPatternInstalled = undefined;
  55   };
  56
  57   // Keep our own copies of the line segments as they're drawn.
  58   this.beginPath = function() {
  59     segments = [];
  60     realBeginPath.call(this);
  61   };
  62   this.moveTo = function(x, y) {
  63     segments.push([[x, y]]);
  64     realMoveTo.call(this, x, y);
  65   };
  66   this.lineTo = function(x, y) {
  67     var last = segments[segments.length - 1];
  68     last.push([x, y]);
  69   };
  70
  71   this.stroke = function() {
  72     if (segments.length === 0) {
  73       // Maybe the user is drawing something other than a line.
  74       // TODO(danvk): test this case.
  75       realStroke.call(this);
  76       return;
  77     }
  78
  79     for (var i = 0; i < segments.length; i++) {
  80       var seg = segments[i];
  81       var x1 = seg[0][0], y1 = seg[0][1];
  82       for (var j = 1; j < seg.length; j++) {
  83         // Draw a dashed line from (x1, y1) - (x2, y2)
  84         var x2 = seg[j][0], y2 = seg[j][1];
  85         this.save();
  86
  87         // Calculate transformation parameters
  88         var dx = (x2-x1);
  89         var dy = (y2-y1);
  90         var len = Math.sqrt(dx*dx + dy*dy);
  91         var rot = Math.atan2(dy, dx);
  92
  93         // Set transformation
  94         this.translate(x1, y1);
  95         realMoveTo.call(this, 0, 0);
  96         this.rotate(rot);
  97
  98         // Set last pattern index we used for this pattern.
  99         var patternIndex = dashedLineToHistory[0];
 100         x = 0;
 101         while (len > x) {
 102           // Get the length of the pattern segment we are dealing with.
 103           segment = pattern[patternIndex];
 104           // If our last draw didn't complete the pattern segment all the way
 105           // we will try to finish it. Otherwise we will try to do the whole
 106           // segment.
 107           if (dashedLineToHistory[1]) {
 108             x += dashedLineToHistory[1];
 109           } else {
 110             x += segment;
 111           }
 112
 113           if (x > len) {
 114             // We were unable to complete this pattern index all the way, keep
 115             // where we are the history so our next draw continues where we
 116             // left off in the pattern.
 117             dashedLineToHistory = [patternIndex, x-len];
 118             x = len;
 119           } else {
 120             // We completed this patternIndex, we put in the history that we
 121             // are on the beginning of the next segment.
 122             dashedLineToHistory = [(patternIndex+1)%pattern.length, 0];
 123           }
 124
 125           // We do a line on a even pattern index and just move on a odd
 126           // pattern index.  The move is the empty space in the dash.
 127           if (patternIndex % 2 === 0) {
 128             realLineTo.call(this, x, 0);
 129           } else {
 130             realMoveTo.call(this, x, 0);
 131           }
 132
 133           // If we are not done, next loop process the next pattern segment, or
 134           // the first segment again if we are at the end of the pattern.
 135           patternIndex = (patternIndex+1) % pattern.length;
 136         }
 137
 138         this.restore();
 139         x1 = x2, y1 = y2;
 140       }
 141     }
 142     realStroke.call(this);
 143     segments = [];
 144   };
 145 };