How in js to dynamically draw objects?

know about

the canvas is generally good.

but the case which - when you click on the canvas\a button is the first point of the square and on like taps - visually see the size of the square. as a dynamic add?
March 12th 20 at 08:04
3 answers
March 12th 20 at 08:06
Well here everything is simple enough if you know how to draw a square and track mouse events (mousedown, mouseup, mousemove). When the mouse button is pressed record the coordinates of the cursor, this is the starting point. Further, when moving the mouse you also get the coordinates of the cursor, this is the point where to draw. It remains only to draw. To make it dynamically, you will have to draw on every frame, cleaned - painted, cleaned - painted and so on.

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


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.rect(x1, y1, x2 - x1, y2 - y1);

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);


function animate() {

March 12th 20 at 08:08
Logic. Have two points, start and end until they are empty. When you first click do background checks, if the starting point is not, then this click will be the starting point, then we write the coordinates of a click in the starting point. At this point, it should work the mouse event mousemove which makes checking whether there is a starting point and no end, then draw a rectangle from the start point to the coordinates of the mouse. When re-clicked again, the function checks if the starting point and the end is not, then the recorded point the mouse in the end. At this point, the condition in mousemove no longer works, because there's an end point, the rectangle is closed. It is possible to draw completely.
From fillRect endpoint is described by width and height, so you need to calculate like this:
width = xEnd - xStart;
height = yEnd - yStart;
this will not be a visual square when moving. at any point in time, so to draw a square? how hard it is for the browser? - Rudolph commented on March 12th 20 at 08:11
@Rudolph, it is possible to draw on mousemove, and using the requestAnimationFrame loop. It all depends on your task. One object is not hard, there are not many transactions. - marjory20 commented on March 12th 20 at 08:14
In this example, all that the list is drawn on the canvas and redrawn every frame (background, grid, objects), the functions of rendering available via ctx are not called directly but through a wrapper that is responsible for the scaling of displayed content. Even on my old computer is not slow. - Crawford commented on March 12th 20 at 08:17 - Rudolph commented on March 12th 20 at 08:20
@Rudolphand clean before drawing
ctx.clearRect(0, 0, 1050, 1050); - marjory20 commented on March 12th 20 at 08:23
March 12th 20 at 08:10

Find more questions by tags CanvasJavaScript