How can we do this so that when the screen is clicked, a line is created by a canvas from one vertex to the clicked location?

Question

I have created a circle here so that when the screen is clicked, the circle will move there. And I also have a fixed point (vertex) that I want these two points to be the origin and destination of a line.

const coordinates = document.querySelector(".coordinates");
const circle = document.querySelector(".circle");
const result = document.querySelector(".result");
const numbers = document.querySelectorAll("p");
coordinates.addEventListener("click", e => {
    circle.style.setProperty('--x', `${e.clientX}px`);
    circle.style.setProperty('--y', `${e.clientY}px`);
})

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(50,100);
ctx.stroke();

canvas {
    color: rgb(255, 255, 255);
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: fixed;
    --x: 47px;
    left: calc(var(--x) - 10px);
    --y: 47px;
    top: calc(var(--y) - 10px);
    background-color: white;
    
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #24232e;
}
.coordinates {
    height: 100%; 
}

<!DOCTYPE html>
<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">
</head>


<body>
    <div class="bg">
        <div class="coordinates">
          <canvas id="myCanvas" width="200" height="100" style=""></canvas>
        </div>
    </div>
    <div class="circle">
    </div>
</body>


</html>

How to do this with canvas? ! would appreciate <3

ShadowLp174 · Accepted Answer · 2022-01-23T16:26:09.200

You can detect the mouse position on the canvas and draw a line to the coordinates. to get the canvas x and y of the mouse, you have to do some calculations because the site coordinates are a bit different than the canvas ones.
A more detailed description is here: https://stackoverflow.com/a/17130415/14076532

This will work only, if the canvas is big enough, logically...

Hope this helps:

const coordinates = document.querySelector(".coordinates");
const circle = document.querySelector(".circle");
const result = document.querySelector(".result");
const numbers = document.querySelectorAll("p");
coordinates.addEventListener("click", e => {
    clicked(e);
    circle.style.setProperty('--x', `${e.clientX}px`);
    circle.style.setProperty('--y', `${e.clientY}px`);
})

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#de7270"; // change your color here NOTE: this will remain until you change it
ctx.moveTo(0,0);
ctx.lineTo(50,100);
ctx.stroke();

function clicked(event) {
  ctx.save(); // some canvas-safety-stuff
  ctx.beginPath();
  
  let mousepos = getMousePos(event); // get the mouse position in "canvas-cooridnates"
  
  ctx.clearRect(0,0, c.width, c.height) // erease the canvas
  ctx.moveTo(0, 0);
  ctx.lineTo(mousepos.x, mousepos.y); // draw the line to the mouse
 
  ctx.closePath(); 
  ctx.stroke(); // closing of the canvas-safety-stuff
  ctx.restore();
}

function getMousePos (evt) {
      var rect = c.getBoundingClientRect(), // abs. size of element
          scaleX = c.width / c.width,    // relationship bitmap vs. element for X
          scaleY = c.height / rect.height;  // relationship bitmap vs. element for Y

      return {
        x: (evt.clientX - rect.left) * scaleX,   // scale mouse coordinates after they have
        y: (evt.clientY - rect.top) * scaleY     // been adjusted to be relative to element
      }
    }

canvas {
    color: rgb(255, 255, 255);
}
.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: fixed;
    --x: 47px;
    left: calc(var(--x) - 10px);
    --y: 47px;
    top: calc(var(--y) - 10px);
    background-color: white;
    
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #24232e;
}
.coordinates {
    height: 100%; 
}

<!DOCTYPE html>
<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">
</head>


<body>
    <div class="bg">
        <div class="coordinates">
          <canvas id="myCanvas" width="200" height="100" style=""></canvas>
        </div>
    </div>
    <div class="circle">
    </div>
</body>


</html>

Thank you so much, but what should I do to have just one line? I mean after second click, the first line disappears? and how should I change the color of the line? — saleh, Jan 23 '22 at 16:00
so you can delete the whole canvas using ```ctx.clearrect(0,0, c.width, c.height)``` call this before the line gets drawn... you can change the color of the line using ```ctx.strokeStyle = ""``` call this, after the context variable was initiated... should work :) — ShadowLp174, Jan 23 '22 at 16:23

How can we do this so that when the screen is clicked, a line is created by a canvas from one vertex to the clicked location?

1 Answers1