KineticJS won't draw a dashed line in Internet Explorer 10

Question

Trying to display a dashed line with KineticJS (v4.7.3). It works fine in Chrome, but in IE (v10), a normal solid line is displayed.

Here's the code:

var element = document.getElementById('target'),
    stage = new Kinetic.Stage({
        container: element,
        width: element.offsetWidth,
        height: element.offsetHeight
    }),
    layer = new Kinetic.Layer();

layer.add(new Kinetic.Line({
    points: [10, 10, 190, 190],
    stroke: 'black',
    strokeWidth: 1,
    dashArray: [5, 4]
}));
stage.add(layer);

And you can see the behavior for yourself in here.

score 1 · Answer 1 · edited May 23 '17 at 12:13

Fixed in IE-11 !

Until all "bad" IE's die, you can "do-it-yourself" fairly easily for lines (less easily for curves).

You can use a custom Kinetic.Shape which gives you access to a canvas context (a wrapped context).

Code is taken from this SO post: dotted stroke in <canvas>

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 = dx ? dy/dx : 1e15;
    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;
    }
  }
}

Totally off-topic: Go Wisconsin! I spent many a great summer at my grandmothers house in Lacrosse.

Josh Schultz · Answer 2 · 2013-11-07T17:22:49.127

Short answer: Not supported.

Via a thread here, the creator of KineticJS addresses this issue:

"[T]he dashArray property now uses the browser-implemented dashArray property of the canvas context, according to the w3c spec. Firefox is a little behind at the moment."

If you follow the thread, you'll discover that this was an issue for Firefox at one point, too, but that has been resolved. However, support for IE should apparently not be expected any time soon.

KineticJS won't draw a dashed line in Internet Explorer 10

2 Answers2