Hello !
I have a custom cursor, but it is not clickable and I don’t know why…
here is the “Inside tag” :
<style>
canvas {
pointer-events: none;
}
</style>
and the “Before tag” :
<script>
let canvas = document.querySelector('canvas');
let c = canvas.getContext('2d');
let mousePositions = [];
let lastMousePosition = {
x: undefined,
y: undefined
}
let collectMousePositionTimerElapsed = false;
let collectMousePositionTimer = setInterval(function() {
collectMousePositionTimerElapsed = true;
}, 100);
let mouseIsStoppedTimer;
canvas.width = innerWidth;
canvas.height = innerHeight;
c.strokeStyle = "#86b2bb";
c.lineWidth = 2;
window.addEventListener('mousemove', function(event) {
lastMousePosition = {
x: event.x,
y: event.y
}
clearTimeout(mouseIsStoppedTimer);
mouseIsStoppedTimerElapsed = false;
mouseIsStoppedTimer = setTimeout(function() {
if(mousePositions.length == 10)
mousePositions.shift();
mousePositions.push(lastMousePosition);
}, 100);
if(collectMousePositionTimerElapsed)
{
collectMousePositionTimerElapsed = false;
if(mousePositions.length == 10)
mousePositions.shift();
mousePositions.push({
x: event.x,
y: event.y
});
}
});
function animate() {
requestAnimationFrame(animate);
c.clearRect(0, 0, innerWidth, innerHeight);
if(mousePositions.length <= 0)
return;
c.beginPath();
c.moveTo(mousePositions[0].x, mousePositions[0].y);
for(let i = 1; i < mousePositions.length; i++)
c.lineTo(mousePositions[i].x, mousePositions[i].y);
c.stroke();
}
animate();
</script>
Here is my site Read-Only: