Draw on canvas no matter the position of the canvas

Asked

Viewed 30 times

-1

I have this code that makes me able to draw lines on the canvas: https://jsfiddle.net/475yesLw/

const canvas = document.createElement("canvas");
      canvas.setAttribute("id", "canvas");
      canvas.setAttribute("class", "canvas");

      const context = canvas.getContext("2d");

      canvas.width = 400;
      canvas.height = 400;

      context.lineWidth = 4;
      context.strokeStyle = "red";
      const brush = {
        active: false,
        move: false,
        pos: { x: 0, y: 0 },
        posPrev: null,
      };

      const drawLine = (line) => {
        context.beginPath();
        context.moveTo(line.posPrev.x, line.posPrev.y);
        context.lineTo(line.pos.x, line.pos.y);
        context.stroke();
      };

      canvas.onmousedown = () => {
        brush.active = true;
      };
      canvas.onmouseup = () => {
        brush.active = false;
      };
      canvas.onmousemove = (event) => {
        brush.pos.x = event.clientX;
        brush.pos.y = event.clientY;
        brush.move = true;
      };

      const loop = () => {
        if (brush.active && brush.move && brush.posPrev) {
          drawLine({ pos: brush.pos, posPrev: brush.posPrev });
          brush.move = false;
        }
        brush.posPrev = { x: brush.pos.x, y: brush.pos.y };
        setTimeout(loop, 10);
      };
      loop();

      document.body.appendChild(canvas);

Only if I change the position of the canvas to the center of the canvas, it no longer draws: https://jsfiddle.net/475yesLw/3/

I want no matter the position I place the canvas, make the lines based on the size of the canvas I set.

javascript html5 canvas

1 answer

1

Actually it is drawing, but the X and Y coordinates are not "correct". You need to compensate the event.clientX and event.clientY, subtracting by the positioning of the canvas through the function getBoundingClientRect().

const canvas = document.createElement("canvas");
      canvas.setAttribute("id", "canvas");
      canvas.setAttribute("class", "canvas");

      const context = canvas.getContext("2d");

      canvas.width = 200;
      canvas.height = 200;

      context.lineWidth = 4;
      context.strokeStyle = "red";
      const brush = {
        active: false,
        move: false,
        pos: { x: 0, y: 0 },
        posPrev: null,
      };

      const drawLine = (line) => {
        context.beginPath();
        context.moveTo(line.posPrev.x, line.posPrev.y);
        context.lineTo(line.pos.x, line.pos.y);
        context.stroke();
      };

      canvas.onmousedown = () => {
        brush.active = true;
      };
      canvas.onmouseup = () => {
        brush.active = false;
      };
      canvas.onmousemove = (event) => {
        const rect = canvas.getBoundingClientRect();
        brush.pos.x = event.clientX - rect.left;
        brush.pos.y = event.clientY - rect.top;
        brush.move = true;
      };

      const loop = () => {
        if (brush.active && brush.move && brush.posPrev) {
          drawLine({ pos: brush.pos, posPrev: brush.posPrev });
          brush.move = false;
        }
        brush.posPrev = { x: brush.pos.x, y: brush.pos.y };
        setTimeout(loop, 10);
      };
      loop();

     document.querySelector(".container-canvas").appendChild(canvas);
.fade{
  display: flex;
  position: fixed;
  top: 0;
  height: 100vh;
  align-items:center;
  justify-content:center;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.container-canvas{
  border: 1px solid red; 
}
.canvas{
  background-color:white;
  display:block;
}
<html>
<head>
<title>Canvas Draw</title>
</head>
<body>
<div class="fade">
  <div class="container-canvas"></div>
    </div>
</body>
</html>

Link to the modifications: jsfiddle.net

Browser other questions tagged javascript html5 canvas

You are not signed in. Login or sign up in order to post.