Home/ Questions/Q 6681031
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:32:38+00:00

I have been looking at tutorials and yet I can’t seem to figure out

  • 0

I have been looking at tutorials and yet I can’t seem to figure out where I’m going wrong. This seems like it should be very straight forward yet it’s giving me problems. Below is some simple code for creating a mouse listener for a canvas object. Currently function clickReporter is not being called when the canvas is clicked. Any ideas on why not?

HTML5

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Play Area 2 - Mouse Events and the Canvas</title>
    <script src="play_area_2.js" type="text/javascript"></script>
    </head>

    <body onload="init();">
    <canvas id="myCanvas" width="500" height="400">
    Your browser dosen't support the HTML5 canvas.</canvas><br />
    </body>
    </html>

JavaScript

    var canvas;
    var context;

    function init() {
        canvas = document.getElementById("myCanvas");
        context = canvas.getContext("2d");

        drawBox();

        canvas.addEventListener('onclick', clickReporter, false);
    }

    function clickReporter(e) {
        alert("clicked");
    }

    function drawBox() {
        context.fillStyle = "black";
        context.strokeRect(20, 20, canvas.width-20, canvas.height-20);
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should be using ‘click’ and not ‘onclick’. “on” is only used when setting it as a property (e.g., canvas.onclick = clickReporter).

    canvas.addEventListener('click', clickReporter, false);

    UPDATE

    More details on click vs. onclick.

    There are three ways to attach an event listener to an object in JavaScript:

    1. Through element.addEventListener. When you use this, you specify the event name you want to set. For example, ‘click’, or ‘mouseover’, or ‘touchstart’. In this case, you’re specifying the event’s actual name. This is useful because you can add more than one listener to an event.

      canvas.addEventListener('click', clickReporter, false);
canvas.addEventListener('click', otherClickReporter, false);
// Both clickReporter and otherClickReporter will be called on a click event.

    2. Through element.onsomeevent (onclick, onmouseover, ontouchstart). This is an older convention which is fully standard and supported in HTML5. This is a very easy way to set the event listener but it has its drawbacks. Only one event listener can be set at a time with this method:

      canvas.onclick = clickReporter;
canvas.onclick = otherClickReporter;
// Only otherClickReporter will be called on a click event.

    3. Through the HTML itself. This is where all the conventions started. You can define an event directly in the HTML very much like the previous example:

      <canvas onclick="clickReporter()"></canvas>

      This is the same as the following, assuming that clickReporter gets attached to the window object.

      <canvas></canvas>
<script>
    canvasWeJustCreated.onclick = function() {clickReporter();}
</script>

    Arguably the way you are doing it is the best way. There will certainly be cases where you want to use the other methods, like when generating a page on the server or trying to temporarily suppress scrolling on an iPhone, but for most applications, addEventListener is best.

    • 0