How to draw line between points using click event handler?
Question
I'm using a event handler on a HTML canvas to track the coordinates of where a user clicks, and my idea is to connect coordinates together with a line.
The code below creates an Array and keeps a list of coordinates within the canvas element that the user has clicked on, and also contains logic to draw a line between the currently clicked point and the point that's been previously clicked on.
The problem I'm encountering is that, no matter how many times I click, even though my Array is being populated with coordinates, the lines are not being drawn between the points.
I'm not entirely sure what I am doing wrong, or if there is some re-rendering being done that might be wiping away the drawings I make on the canvas.
var coords = []; var canvas = document.getElementById('canvas'); canvas.addEventListener('click', function (event) { var coord = { "x": event.screenX, "y": event.screenY }; document.getElementById("coords").innerText = "{" + coord.x + ", " + coord.y + "}"; coords.push(coord); var max = coords.length - 1; if (typeof coords[max - 1] !== "undefined") { var curr = coords[max], prev = coords[max - 1]; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(prev.x, prev.y); context.lineTo(curr.x, curr.y); context.stroke(); } });
<!doctype html> </html> <head> <title>Drawing canvas</title> <style> canvas { width: 200px; height: 200px; border: 2px solid black; border-radius: 5px; } </style> </head> <body> <p id='coords'></p> <canvas id='canvas'></canvas> </body> </html>
1 answers
solution1
2 ACCPTED 2018-08-30 14:58:11
Move your context outside the click event and use canvas coordinates instead of screen one: event.x and event.y Do not use CSS dimensions for the canvas. Check this post
var coords = []; var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); canvas.addEventListener('click', function (event) { var coord = { "x": event.x, "y": event.y}; document.getElementById("coords").innerText = "{" + coord.x + ", " + coord.y + "}"; coords.push(coord); var max = coords.length - 1; if (typeof coords[max - 1] !== "undefined") { var curr = coords[max], prev = coords[max - 1]; context.beginPath(); context.moveTo(prev.x, prev.y); context.lineTo(curr.x, curr.y); context.stroke(); } });
<style> canvas { border: 1px solid black; border-radius: 0px; } body { margin: 0; padding: 0; } </style> <canvas id='canvas' width="200" height="200"></canvas> <p id='coords'></p>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.