How to dynamically draw objects in js?

Question

JavaScript

I know about https://developer.mozilla.org/ru/docs/Web/API/Canv...
canvas is generally good.
but here's the case - when you click on the canvas\button, the first point of the square should be set, and then as you move it away - the dimensions of the square are visually visible. how to add such dynamism?

Answer 1

Well, everything is pretty simple here, if you can draw a square and track mouse actions ( mousedown, mouseup, mousemove). When you press the mouse button, you write down the coordinates of the cursor, this is the starting point. Further, when you move the mouse, you also get the cursor coordinates, this is the point where to draw. It remains only to draw. To make it dynamic, you have to draw on each frame, cleared - painted, cleared - painted, and so on.
jsfiddle.net/profesor08/2rw8c7qg

let canvas = document.createElement("canvas")
let ctx = canvas.getContext("2d")

document.body.appendChild(canvas);

let x1 = 0, y1 = 0, x2 = 0, y2 = 0;
let canDrawSelection = false;

canvas.addEventListener("mousedown", function(e) {
  canDrawSelection = true;
  x1 = e.clientX;
  y1 = e.clientY;
  x2 = e.clientX;
  y2 = e.clientY;
});

canvas.addEventListener("mouseup", function(e) {
  canDrawSelection = false;
});

canvas.addEventListener("mousemove", function(e) {
  x2 = e.clientX;
  y2 = e.clientY;
});

function drawSelection() {
  if (canDrawSelection === true) {
    ctx.beginPath();
    ctx.lineWidth="2";
    ctx.strokeStyle="white";
    ctx.rect(x1, y1, x2 - x1, y2 - y1);
    ctx.stroke();
  }
}

function render() {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  ctx.fillStyle = "#2B2E35";
  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
  drawSelection();
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

animate();

Answer 2

Logic. Have two points, start and end, while they are empty. At the first click, you make a check, if there is no starting point, then this click will be the starting point, which means we write the coordinates of the click to the starting point. At this point, the mousemove mouse event should work, which checks if there is a start point and no end point, then we draw a rectangle from the start point to the mouse coordinate point. When you click again, a check is made again, if there is a start point and no end point, then we write the mouse point to the end point. At this point, the condition on mousemove no longer works, because there is an endpoint, the rectangle is closed. You can finally draw it.
For fillRect , the end point is described by the width and height, so you need to calculate it like this:

width = xEnd - xStart;
height = yEnd - yStart;

Answer 3

https://jsfiddle.net/Ljp1n50k/15/