How to draw a dashed line rectangle in canvas?

Question

I'm tasked to do cropping in canvas and i'm finished with all the logic but one requirement is yet to be finished i.e to draw a dashed rectangle while selecting cropping area like:

strokeRect(x, y, width, height)

How can I draw a dashed rectangle?

It's not straightforward. Refer to: http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas — RSG, Dec 30 '11 at 08:28
Look at this question: http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas — techfoobar, Dec 30 '11 at 08:32

score 23 · Answer 1 · edited Oct 16 '17 at 07:09

23

This has been added to the canvas spec, not all browsers have implemented it yet, but here it is.

context.setLineDash([6]);
context.strokeRect(0, 0, 50, 50);

edited Oct 16 '17 at 07:09

Mohammad Usman

37,952
20
92
95

answered Dec 13 '13 at 03:41

Paul Milham

526
5
13

1

Yeah, you could certainly implement a polyfill in javascript. user319198's answer might work? – Paul Milham Mar 19 '14 at 17:41

score 1 · Answer 2 · answered Dec 30 '11 at 08:30

1

There's no built in functionality for dashed lines, but here's an example using a custom JS prototype:

HTML5 Canvas and Dashed Lines

answered Dec 30 '11 at 08:30

Clay Garrett

1,023
8
11

score 1 · Answer 3 · edited May 23 '17 at 11:58

Refer : 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];
        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) );
          x += xStep
          y += slope*xStep;
          this[draw ? 'lineTo' : 'moveTo'](x,y);
          distRemaining -= dashLength;
          draw = !draw;
        }
      }
    }

How to draw a dashed line rectangle in canvas?

3 Answers3