Breaking News: Grepper is joining You.com. Read the official announcement!

draw a rectangle on canvas on pointermove

elcharitas answered on January 28, 2022 Popularity 7/10 Helpfulness 5/10

answer draw a rectangle on canvas on pointermove

draw a rectangle on canvas on pointermove

Comment

    let isCon = false;
    let cur = 0;
    const shapes = [];
    const updateFrame = () => {
      shapes.forEach((el) => {
        context.strokeRect(el.x1, el.y1, el.x2 - el.x1, el.y2 - el.y1);
      });
    }

    canvas.addEventListener("pointerdown", function(e){
      isCon = true;
      shapes.push({
        x1: e.clientX - canvas.offsetLeft,
        y1: e.clientY - canvas.offsetTop,
        x2: e.clientX - canvas.offsetLeft,
        y2: e.clientY - canvas.offsetTop,
      });
      context.save();
    });

    canvas.addEventListener("pointermove", function(e){
      if (isCon) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        shapes[cur].x2 = e.clientX - canvas.offsetLeft;
        shapes[cur].y2 = e.clientY - canvas.offsetTop;
        requestAnimationFrame(updateFrame);
      }
    });

    canvas.addEventListener("pointerup", function(){
      isCon = false;
      cur += 1;
    });

Popularity 7/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: canvas draw javascript

Link to this answer
Share Copy Link

Contributed on Jan 28 2022

elcharitas

0 Answers Avg Quality 2/10

draw a rectangle on canvas on pointermove

Contents

More Related Answers

draw a rectangle on canvas on pointermove

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.