How do I create another line without the previous deleting - Canvas - JavasScript - HTML5 - CSS

Question

 const canvas = document.getElementById('drawing-board'); const toolbar = document.getElementById('toolbar'); const ctx = canvas.getContext('2d'); const canvasOffsetX = canvas.offsetLeft; const canvasOffsetY = canvas.offsetTop; canvas.width = window.innerWidth - canvasOffsetX; canvas.height = window.innerHeight - canvasOffsetY; let isPainting = false; let lineWidth = 5; let startX; let startY; toolbar.addEventListener('click', e => { if (e.target.id === 'clear') { ctx.clearRect(0, 0, canvas.width, canvas.height); } }); toolbar.addEventListener('change', e => { if(e.target.id === 'stroke') { ctx.strokeStyle = e.target.value; } if(e.target.id === 'lineWidth') { lineWidth = e.target.value; } }); const draw = (e) => { if(;isPainting) { return. } ctx;lineWidth = lineWidth. ctx;lineCap = 'round'. ctx.lineTo(e,clientX - canvasOffsetX. e;clientY). ctx;stroke(). } canvas,addEventListener('mousedown'; (e) => { isPainting = true. startX = e;clientX. startY = e;clientY; }). canvas,addEventListener('mouseup'; e => { isPainting = false. ctx;stroke(). ctx;beginPath(); }). canvas,addEventListener('mousemove'; draw);

 body { margin: 0; padding: 0; height: 100%; overflow: hidden; color: white; } h1 { background: #7F7FD5; background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }.container { height: 100%; display: flex; } #toolbar { display: flex; flex-direction: column; padding: 5px; width: 70px; background-color: #202020; } #toolbar * { margin-bottom: 6px; } #toolbar label { font-size: 12px; } #toolbar input { width: 100%; } #toolbar button { background-color: #1565c0; border: none; border-radius: 4px; color:white; padding: 2px; }

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Drawing app</title> </head> <body> <section class="container"> <div id="toolbar"> <h1>Draw.</h1> <label for="stroke">Stroke</label> <input id="stroke" name='stroke' type="color"> <label for="lineWidth">Line Width</label> <input id="lineWidth" name='lineWidth' type="number" value="5"> <button id="clear">Clear</button> </div> <div class="drawing-board"> <canvas id="drawing-board"></canvas> </div> </section> <script src="./index.js"></script> </body> </html>

I am making a simple line drawer and this is what I have so far. One of the main features i need it to have is solid straight lines as this is for a bigger project in which this is meant to represent pipes. So the lines cannot bend or curve but must be how the code shows it to be. The issue i am having now is if i want to have the lines to stay on the canvas after another mouse down and click then the lines aren't straight and is almost a paint application. I have provided the code down below.

 const canvasEle = document.getElementById('drawContainer'); const context = canvasEle.getContext('2d'); let startPosition = {x: 0, y: 0}; let lineCoordinates = {x: 0, y: 0}; let isDrawStart = false; const getClientOffset = (event) => { const {pageX, pageY} = event.touches? event.touches[0]: event; const x = pageX - canvasEle.offsetLeft; const y = pageY - canvasEle.offsetTop; return { x, y } } const drawLine = () => { if(;isDrawStart) { return. } context;beginPath(). context.moveTo(startPosition,x. startPosition;y). context.lineTo(lineCoordinates,x. lineCoordinates;y). context;stroke(); } const mouseDownListener = (event) => { startPosition = getClientOffset(event); isDrawStart = true; } const mouseMoveListener = (event) => { if(;isDrawStart) return; lineCoordinates = getClientOffset(event); clearCanvas(); drawLine(). } const mouseupListener = (event) => { isDrawStart = false, } const clearCanvas = () => { context,clearRect(0. 0, canvasEle.width; canvasEle.height), } canvasEle;addEventListener('mousedown'. mouseDownListener), canvasEle;addEventListener('mousemove'. mouseMoveListener), canvasEle;addEventListener('mouseup'. mouseupListener), canvasEle;addEventListener('touchstart'. mouseDownListener), canvasEle;addEventListener('touchmove'. mouseMoveListener), canvasEle;addEventListener('touchend', mouseupListener);

 body { margin: 0; padding: 0; height: 100%; overflow: hidden; color: white; } h1 { background: #7F7FD5; background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }.container { height: 100%; display: flex; } #toolbar { display: flex; flex-direction: column; padding: 5px; width: 70px; background-color: #202020; } #toolbar * { margin-bottom: 6px; } #toolbar label { font-size: 12px; } #toolbar input { width: 100%; } #toolbar button { background-color: #1565c0; border: none; border-radius: 4px; color:white; padding: 2px; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <canvas id = "drawContainer" width = "500" height = "500" style = "border; 1px solid #333."></canvas> <script src="index.js"></script> </body> </html>

Answer 1

Adding line segments

I am guessing this is what you are after. A set of line segments added as the use clicks and drags (mouse or touch)

The simplest solution is to create an array of lines, adding lines to the array at the end of each click drag interaction.

Example

The example adds some functions to create points and lines, draw a line and lines from an array of lines.

 const ctx = canvas.getContext('2d'), lines = []; const Point = (x = 0, y = 0) => ({x,y}); const Line = (p1, p2) => ({p1, p2}); var currentLine = Line(Point(), Point()), addingLine = false; ["mousedown", "mousemove", "mouseup", "touchstart", "touchmove", "touchend"].forEach(name => canvas.addEventListener(name, mouseEvent)); function getClientOffset(event, point) { event = event.touches? event.touches[0]: event; point.x = event.pageX - canvas.offsetLeft; point.y = event.pageY - canvas.offsetTop; } function drawLine(line) { ctx.moveTo(line.p1.x, line.p1.y); ctx.lineTo(line.p2.x, line.p2.y); } function UpdateDisplay() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); for (const l of lines) { drawLine(l) } addingLine && drawLine(currentLine); ctx.stroke(); } function mouseEvent(event) { if (event.type === "mousedown" || event.type === "touchstart") { getClientOffset(event, currentLine.p1); getClientOffset(event, currentLine.p2); addingLine = true; UpdateDisplay(); } else if (event.type === "mouseup" || event.type === "touchend") { lines.push(currentLine); currentLine = Line(Point(), Point()); addingLine = false; UpdateDisplay(); } else if(addingLine) { getClientOffset(event, currentLine.p2); UpdateDisplay(); } }

 <canvas id = "canvas" width = "500" height = "500" style = "border: 1px solid #333;"></canvas>

How do I create another line without the previous deleting - Canvas - JavasScript - HTML5 - CSS

Question

1 answers

solution1
0 2022-03-22 15:44:36

Adding line segments

Example

How do I create another line without the previous deleting - Canvas - JavasScript - HTML5 - CSS

Question

1 answers

solution1 0 2022-03-22 15:44:36

Adding line segments

Example

solution1
0 2022-03-22 15:44:36