HTML5 Canvas Draw Dashed Line

Question

I currently try to a dashed line in a canvas.

What I tried is ctx.setLineDash([5,5]) and well, if I draw very fast it works, but that's all. The method seems to not work, when I draw a line very slow. So on my canvas, I can draw myself with the mouse, and I want that drawn line to be dashed. Only when I move my mouse very fast, it works, when I move it slow, I just get a straight through line.

What can I do to get it working, even when drawing slowly?

Code:


    
    
        
        Choose Color
        
        
        
        
        
        
        Eraser

Kaiido · Accepted Answer

Your problem is that you are currently drawing a new Path at every mousemove. Dashes are made from the path starting point, to its end.
When you do move your mouse slowly, your are actually generating a lot of really small pathes, smaller than the 5px of your dash-array. While when you move your mouse faster, the distance between two points is greater than 10px, and so, you can see the dash.

The solution for this problem is to store your points in an array, and redraw a single path from these stored points every time you do a redraw. This way, your pathes will simply get longer, and your dash will be working fine.

In the following example, I even save a new path at each mouseup, so they can have their own dashed property :

const ctx = c.getContext('2d');

const pathes = []; // this is where we will store all our pathes
let mouse_down = false; // shall we draw ?
c.onmousedown = e => {
  // add a new path object
  pathes.push({
    pts: [], // an array of points
    dashed: check.checked // boolean
  });
  mouse_down = true; // we should draw
}
c.onmouseup = c.onmouseleave = e => mouse_down = false;

c.onmousemove = throttle(e => {
  if (!mouse_down) {
    return;
  } else {
    const rec = c.getBoundingClientRect();
    // add a new point
    addPoint(e.clientX - rec.left, e.clientY - rec.top);
    redraw(); // redraw everything
  }
});

function redraw() {
  ctx.clearRect(0, 0, c.width, c.height); // we clear everything
  // and draw every pathes
  pathes.forEach(path => {
    ctx.setLineDash(path.dashed ? [5, 5] : [0]);
    ctx.beginPath();
    path.pts.forEach(pt => ctx.lineTo(pt.x, pt.y));
    ctx.stroke();
  })
}

function addPoint(x, y) {
  // append to the last one
  const points = pathes[pathes.length - 1].pts;
  points.push({
    x: x,
    y: y
  });
}


// just to avoid unnecessary drawings
function throttle(callback) {
  if (typeof callback !== 'function')
    throw 'A callback function must be passed';
  var active = false;
  var evt;
  var handler = function() {
    active = false;
    callback(evt);
  };
  return function handleEvent(e) {
    evt = e;
    if (!active) {
      active = true;
      requestAnimationFrame(handler);
    }
  };
}

canvas {
  border: 1px solid
}

dashed :

HTML5 Canvas Draw Dashed Line

Answers (2)

Related Questions