Html Question posted in
Some basic documentation can be found here.

HTML Canvas "onmousedown" event and "mousedown" listener not firing

I have an HTML page with a canvas in the body defined as so:

<!DOCTYPE html>
<html>
<head>
    <script defer src="./js/canvas.js"></script>
    <link rel="stylesheet" href="./css/canvas.css">
</head>
<body>
    <canvas id="pinboard"></canvas>
</body>
</html>

In canvas.js I’ve written:

var canvas = document.getElementById("pinboard");

canvas.addEventListener("mousedown", function (e) {
    console.log("DOWN 1 " + e);
});

canvas.onmousedown = function (e) {
    console.log("DOWN 2 " + e);
}

This isn’t in a DOMContentLoaded listener, but I’ve tried with and without and it doesn’t work.

When I click on the canvas, I expect either "DOWN 1" to print, "DOWN 2" to print, or both, but neither of them are logging.

I’ve searched through quite a few posts but I can’t find anything that’s fixed my problem.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Oh my gosh, I feel so stupid 🤦‍♂️

    At some point in my CSS, I decided I needed a pointer-events: none;

    Why? No idea, I wrote it late last night. I can't believe it took that long to realize the reason my canvas wasn't detecting input was because I told it not to.

    :(


  2. 0

    You might need to set a width and height to the canvas element.

    <canvas id="pinboard" width="800" height="600"></canvas>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search