CODEWITHSUNDEEP
javascriptcanvasinternet-explorer-9html5-canvas
BigBug
BigBug

Reputation: 6290

drawing lines with canvas

Are dashed/dotted lines now supported in IE9 Canvas? Currently i'm doing something very similar to the following:

var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
if (CP && CP.lineTo){
  CP.dashedLine = function(x,y,x2,y2,dashArray){
    if (!dashArray) dashArray=[10,5];
    if (dashLength==0) dashLength = 0.001; // Hack for Safari
    var dashCount = dashArray.length;
    this.moveTo(x, y);
    var dx = (x2-x), dy = (y2-y);
    var slope = dy/dx;
    var distRemaining = Math.sqrt( dx*dx + dy*dy );
    var dashIndex=0, draw=true;
    while (distRemaining>=0.1){
      var dashLength = dashArray[dashIndex++%dashCount];
      if (dashLength > distRemaining) dashLength = distRemaining;
      var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
      if (dx<0) xStep = -xStep;
      x += xStep
      y += slope*xStep;
      this[draw ? 'lineTo' : 'moveTo'](x,y);
      distRemaining -= dashLength;
      draw = !draw;
    }
  }
}

found from: override line stroke in canvas for dashed/dotted lines

This works great in IE7, IE8, IE9 Compatibility Mode and FireFox, however, in IE9 and Chrome, a solid stroke is drawn for each dotted line.

Any ideas as to why this may be happening?

Upvotes: 1

Views: 937

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63812

Something else is wrong. It works just fine in Chrome:

ctx.beginPath();
ctx.dashedLine(10,10, 100, 100,[4, 4])
ctx.stroke();

http://jsfiddle.net/MPg5X/1/

Upvotes: 1

Related Questions