CODEWITHSUNDEEP
javascriptcanvashtml5-canvas
ar099968
ar099968

Reputation: 7547

Javascript: mousemove draw on canvas dots not line (with alpha)

I have a canvas where on "mousemove" i want draw on it:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var isDown = false;
var lastPoint = {x: 0, y: 0};

function onMouseDown(event) {
    isDown = true;
    var point = getCanvasPointOfMouseEvent(event);
    ctx.beginPath();
    ctx.moveTo(point.x, point.y);
    lastPoint = point;
}

function onMouseMove(event) {
    if ( isDown !== false) {
        var point = getCanvasPointOfMouseEvent(event);

        ctx.beginPath();
        ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
        ctx.lineWidth = '10';
        ctx.lineJoin = 'round';
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(point.x, point.y);
        ctx.closePath();
        ctx.stroke();
        lastPoint = point;
    }
}


function onMouseUp(event) {
    isDown = false;
    ctx.closePath();
}


function getCanvasPointOfMouseEvent(event) {

    var canvasX = (event.pageX - canvas.offsetLeft);
    var canvasY = (event.pageY - canvas.offsetTop);

    return {x: canvasX, y: canvasY};
}
#canvas {
    border: 1px solid red;
    cursor: crosshair;
}
<canvas width="250px" height="250px" onmousedown="onMouseDown(event)" onmousemove="onMouseMove(event)" onmouseup="onMouseUp(event)" id="canvas">
Your browser doesn't support canvas!
</canvas>

The output is lines with dots:

enter image description here

but i want only lines, like this:

enter image description here

how fix it?

Upvotes: 1

Views: 251

Answers (1)

Kaiido
Kaiido

Reputation: 136776

Basics is clear all and redraw all.
To achieve this, you'll have to store all the coordinates in an array, and each time you want to draw, to create a new sub-path with all the stored coordinates.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var isDown = false;
var points = [];


function onMouseDown(event) {
    var point = getCanvasPointOfMouseEvent(event);
    points.push(point); // store
    redrawAll(); // clearAll and redraw
    isDown = true; // make it last so we can grab the isStart below
}

function onMouseMove(event) {
    if ( isDown !== false) {
        var point = getCanvasPointOfMouseEvent(event);
        points.push(point); // store
        redrawAll(); // clear all and redraw
    }
}
function redrawAll() {
  // clear all
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.lineWidth = '10';
  ctx.lineJoin = 'round';
  // redraw as a single sub-path
  ctx.beginPath();
  points.forEach(function(pt) {
    if(pt.isStart) ctx.moveTo(pt.x, pt.y);
    else ctx.lineTo(pt.x, pt.y);
  });
  ctx.stroke();
}

function onMouseUp(event) {
    isDown = false;
}


function getCanvasPointOfMouseEvent(event) {

    var canvasX = (event.pageX - canvas.offsetLeft);
    var canvasY = (event.pageY - canvas.offsetTop);

    return {x: canvasX, y: canvasY, isStart: !isDown};
}
#canvas {
    border: 1px solid red;
    cursor: crosshair;
}
<canvas width="250px" height="250px" onmousedown="onMouseDown(event)" onmousemove="onMouseMove(event)" onmouseup="onMouseUp(event)" id="canvas">
Your browser doesn't support canvas!
</canvas>

If you want each mouseup to create a new sub-path (and hence have these mix up when passing twice at the same coords), you just have to slightly modify the redrawAll function:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var isDown = false;
var points = [];


function onMouseDown(event) {
    var point = getCanvasPointOfMouseEvent(event);
    points.push(point);
    redrawAll();
    isDown = true;
}

function onMouseMove(event) {
    if ( isDown !== false) {
        var point = getCanvasPointOfMouseEvent(event);
        points.push(point);
        redrawAll();
    }
}
function redrawAll() {
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.lineWidth = '10';
  ctx.lineJoin = 'round';

  ctx.beginPath();
  points.forEach(function(pt) {
    if(pt.isStart){
      ctx.stroke(); // draw previous
      ctx.beginPath(); // begin a new sub-path
    }
    ctx.lineTo(pt.x, pt.y); // will moveTo automatically if needed
  });
  ctx.stroke();

}

function onMouseUp(event) {
    isDown = false;
}


function getCanvasPointOfMouseEvent(event) {

    var canvasX = (event.pageX - canvas.offsetLeft);
    var canvasY = (event.pageY - canvas.offsetTop);

    return {x: canvasX, y: canvasY, isStart: !isDown};
}
#canvas {
    border: 1px solid red;
    cursor: crosshair;
}
<canvas width="250px" height="250px" onmousedown="onMouseDown(event)" onmousemove="onMouseMove(event)" onmouseup="onMouseUp(event)" id="canvas">
Your browser doesn't support canvas!
</canvas>

Upvotes: 1

Related Questions