双击画布上的删除点

Question

I have a canvas on which user can draw point on click on any part of it. As one know we must give the user the possibility to undo an action that he as done. This is where I'am stuck, how can I program the codes to allow the user to remove the point on double click on the the point he wants to remove ?

<canvas id="canvas" width="160" height="160" style="cursor:crosshair;"></canvas>

1- Codes to draw the canvas and load an image in it

var canvasOjo1 = document.getElementById('canvas'),
context1 = canvasOjo1.getContext('2d');
ojo1();

function ojo1()
{

base_image1 = new Image();
base_image1.src = 'https://www.admedicall.com.do/admedicall_v1//assets/img/patients-pictures/620236447.jpg';
base_image1.onload = function(){
context1.drawImage(base_image1, 0, 0);
}
}

2- Codes to draw the points

$("#canvas").click(function(e){
getPosition(e); 
});

var pointSize = 3;

function getPosition(event){
var rect = canvas.getBoundingClientRect();
var x = event.clientX - rect.left;
var y = event.clientY - rect.top;

drawCoordinates(x,y);
}

function drawCoordinates(x,y){  
var ctx = document.getElementById("canvas").getContext("2d");


ctx.fillStyle = "#ff2626"; // Red color

ctx.beginPath();
ctx.arc(x, y, pointSize, 0, Math.PI * 2, true);
ctx.fill();
}

My fiddle : http://jsfiddle.net/xpvt214o/834918/

By hover the mouse over the image we see a cross to create the point.

How can i remove a point if i want to after create it on double click ?

Thank you in advance.

Answer 1

Please read first this answer how to differentiate single click event and double click event because this is a tricky thing.

For the sake of clarity I've simplified your code by removing irrelevant things.

Also please read the comments of my code.

 let pointSize = 3; var points = []; var timeout = 300; var clicks = 0; const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); let cw = (canvas.width = 160); let ch = (canvas.height = 160); function getPosition(event) { var rect = canvas.getBoundingClientRect(); return { x: event.clientX - rect.left, y: event.clientY - rect.top }; } function drawCoordinates(point, r) { ctx.fillStyle = "#ff2626"; // Red color ctx.beginPath(); ctx.arc(point.x, point.y, r, 0, Math.PI * 2, true); ctx.fill(); } canvas.addEventListener("click", function(e) { clicks++; var m = getPosition(e); // this point won't be added to the points array // it's here only to mark the point on click since otherwise it will appear with a delay equal to the timeout drawCoordinates(m, pointSize); if (clicks == 1) { setTimeout(function() { if (clicks == 1) { // on click add a new point to the points array points.push(m); } else { // on double click // 1. check if point in path for (let i = 0; i < points.length; i++) { ctx.beginPath(); ctx.arc(points[i].x, points[i].y, pointSize, 0, Math.PI * 2, true); if (ctx.isPointInPath(mx, my)) { points.splice(i, 1); // remove the point from the array break;// if a point is found and removed, break the loop. No need to check any further. } } //clear the canvas ctx.clearRect(0, 0, cw, ch); } points.map(p => { drawCoordinates(p, pointSize); }); clicks = 0; }, timeout); } }); 

 body { background: #20262E; padding: 20px; } 

 <canvas id="canvas" style="cursor:crosshair;border:1px solid white"></canvas>