1

I am trying to create a whiteboarding web app using HTML5 and Canvas.

I have implement a simple pen and paintbrush shaped pen with help from this brilliant article:

http://perfectionkills.com/exploring-canvas-drawing-techniques/

My issue is withe dotted line pen and highlighter pen.

The dotted line looks like a simple unbroken line if the mouse moves slowly, and with large gaps if moved quickly. What I want is a consistently spaced dotted line.

I tried setting the context.setLineDash but this has no effect on the result.

I then tried to calculate a minimum distance between the last point and current point and draw if over the dot gap lenth but this also does not seemeingly affect the result.

Here is my code:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var lastPoint;
var isDrawing = false;

context.lineWidth = 4;
context.lineJoin = context.lineCap = 'round';

canvas.onmousedown = function(e) {
  isDrawing = true;
  lastPoint = {
    x: e.clientX,
    y: e.clientY
  };
  lastPoint = {
    x: e.offsetX,
    y: e.offsetY
  };
};

canvas.onmousemove = function(e) {

  if (!isDrawing) return;

  context.beginPath();
  context.strokeStyle = 'red';
  context.fillStyle = 'red';

  mx = e.clientX; // mouse pointer and stroke path is off if use this
  my = e.clientY;
  mx = e.offsetX; // mouse pointer and stroke path match using this
  my = e.offsetY;

  context.setLineDash([5, 25]);

  xlen = Math.abs(mx - lastPoint.x) + context.lineWidth;
  ylen = Math.abs(my - lastPoint.y) + context.lineWidth;
  gap = Math.sqrt((ylen * ylen) + (xlen * xlen));

  if (gap >= 5) {
    context.moveTo(lastPoint.x, lastPoint.y);
    context.lineTo(mx, my);
    context.stroke();
    lastPoint = {
      x: mx,
      y: my
    };
  }
};

canvas.onmouseup = function() {
  isDrawing = false;
};
html,body,canvas
{
  width: 100%;
  height: 100%;
  margin: 0;
}
<canvas id="canvas" ></canvas>

The result is this:

enter image description here

With the highlighter, I get overlapping points which give dark spots on the path. The code for this is:

  context.globalAlpha = 0.3;
  context.moveTo(lastPoint.x, lastPoint.y);
  context.lineTo(mx, my);
  context.stroke();
  lastPoint = { x: mx, y: my };

The result:

enter image description here

TenG
  • 3,843
  • 2
  • 25
  • 42
  • 1
    Your code works fine for me, no broken lines. Howerver with global alpha it does show dots – vanowm Aug 21 '21 at 19:11
  • It works fine for me too! – Decapitated Soul Aug 21 '21 at 19:12
  • 1
    I think it might be better to draw you path on a separate canvas and store all points until mouseup, then use `lineTo` with all the points to draw the full line every frame, and then merge it over your canvas (of which you hopefully keep a before copy so you can reset it every frame without the path, then draw the now-longer path to it and show it to the user). I am, however, also having hard time replicating it in your snippet, but that might be because I have a powerful computer made for this stuff... – somethinghere Aug 21 '21 at 19:47
  • @vanowm and Decap does it give the same line of regularly spaced dots (in the 1st example) when you mouse is moved slowly and quickly? – TenG Aug 21 '21 at 20:44
  • 1
    yes, no matter what speed I move my mouse it draw continuous line. Are you certain that your snippet on this page doesn't work for you? If it does, but your original code doesn't, than it's obviously something not related to the posted code. In fact looking at your code, there are quiet a few unidentified variables used. Perhaps you are having some scope conflicts there. – vanowm Aug 21 '21 at 22:38
  • @vanowm Thanks . I've added a missing line of code context.setLineDash([5, 25]) which now gice the same result as depicted in the images when I 'Run Snippet'. There is a difference in the rendering of the stroke when the mouse is moved quickly and slowly. – TenG Aug 22 '21 at 10:16
  • I found the answer here. https://stackoverflow.com/questions/45137409/html5-canvas-draw-dashed-line – TenG Aug 22 '21 at 11:51
  • Does this answer your question? [HTML5 Canvas Draw Dashed Line](https://stackoverflow.com/questions/45137409/html5-canvas-draw-dashed-line) – Helder Sepulveda Aug 22 '21 at 15:16

0 Answers0