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 ></div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CodePudding user response:
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.