I am currently working on a paint software program and I have a feature where pressing the ctrl key while moving the mouse turns on the eraser. However, when the key is pressed, I want the cursor (currently a crosshair) to change to none. I have tried implementing
document.body.style.cursor = "none"document.getElementById("canvas").style.cursor = "none"Below is a snippet of the code I have attempted so far:
<!doctype html>
<html lang="en">
<head>
<style>
body {
/*
CSS selector to style all <body> elements on the page
*/
background-color: #c0c0c0;
}
#cw1MainContainer {
/*
CSS selector to style the element with id="cw1MainContainer"
*/
position: absolute;
left: 20px;
top: 20px;
}
canvas {
/*
CSS selector to style all <canvas> elements on the page
*/
background-color: #fafafa;
border: 1px solid #a0a0a0;
cursor: crosshair;
}
#box {
pointer-events: none;
background-color: #000000;
width: 5px;
height: 5px;
}
</style>
<script>
// Javascript code
</script>
</head>
</html>
Any assistance in resolving this issue would be greatly appreciated. Thank you
EDIT: here's my HTML code: `
<div id="cw1MainContainer">
<div id="cw1CanvasContainer">
<canvas id="cw1Canvas" onmousemove="fnTrackMouse(event);" onkeypress="fnBrushSize(event);"></canvas>
<div id="box" style="border: 1px solid #000000; position:absolute;" />
</div>
</div>
</body>`