Drawing on canva while creating a custom cursor

July 26, 2022

I want to make a board on which I can draw using random stroke sizes and random colors. I have achieved that but when I add a custom cursor function on line 9 of my code the mouseup function triggers while I’m drawing and I didn’t lift my finger from the mouse button.

I don’t have much experience with HTML canvas and custom cursors. Can anyone tell me why this is happening?

const cursor = document.querySelector(".cursor");
const moveCursor = (e) => {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
  cursor.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  cursor.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
};

window.addEventListener("mousemove", moveCursor);

var color = $(".selected").css("background-color");
var canvas = $("canvas");
var ctx = canvas[0].getContext("2d");
var lastEvent;
var mouseDown = false;

const colors = ["red", "green", "blue", "purple", "yellow"];
const strokes = [30, 60, 100, 150, 200, 300, 400, 500];

//When clicking on control list items
$(".controls").on("click", "li", function () {
  //Deselect sibling elements
  $(this).siblings().removeClass("selected");
  //Select clicked element
  $(this).addClass("selected");
  //cache current color
  color = $(this).css("background-color");
});

const drawLine = (e) => {
  ctx.beginPath();
  ctx.moveTo(lastEvent.offsetX, lastEvent.offsetY);
  ctx.lineWidth = stroke;
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.strokeStyle = color;
  ctx.lineCap = "round";
  ctx.stroke();
  lastEvent = e;
};

//On mouse events on the canvas
canvas
  .mousedown(function (e) {
    // ctx.globalCompositeOperation = "destination-over";
    lastEvent = e;
    mouseDown = true;
    color = colors[Math.floor(Math.random() * colors.length)];
    stroke = strokes[Math.floor(Math.random() * strokes.length)];

    drawLine(e);
  })
  .mousemove(function (e) {
    //Draw lines
    if (mouseDown) {
      drawLine(e);
    }
  })
  .mouseup(function () {
    mouseDown = false;
    console.log("lifted");
  })
  .mouseleave(function () {
    canvas.mouseup();
    // console.log("left")
  });

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body {
  background: #384047;
  font-family: sans-serif;
  cursor: none;
}

canvas {
  background: #fff;
  display: block;
}

.cursor {
  --size: 28px;
  --color: green;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  border-radius: 50%;
}

.cursor::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background-color: black;
  border-radius: 50%;
  z-index: 1;
}

<!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" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <canvas width="1920" height="929"></canvas>
    <div class="cursor"></div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

>Solution :

the mouseup function triggers while I’m drawing

It is probably rather the mouseleave that triggers here, I suppose, when the cursor "comes between" your canvas and the actual mouse cursor. (You are calling your mouseup handler function from in there.)

Put pointer-events: none; on the cursor element, to make it not react to the mouse pointer in any way.