Home/ Questions/Q 7688405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T19:54:47+00:00

I’m an experienced Java programmer but am looking at some JavaScript/HTML5 stuff for the

  • 0

I’m an experienced Java programmer but am looking at some JavaScript/HTML5 stuff for the first time in about a decade. I’m completely stumped on what should be the simplest thing ever.

As an example I just wanted to draw something and add an event handler to it. I’m sure I’m doing something stupid, but I’ve searched all over and nothing that is suggested (e.g. the answer to this question: Add onclick property to input with JavaScript) works. I’m using Firefox 10.0.1. My code follows. You’ll see several commented lines and at the end of each is a description of what (or what doesn’t) happen.

What’s the correct syntax here? I’m going crazy!

<html>
<body>
    <canvas id="myCanvas" width="300" height="150"/>
    <script language="JavaScript">
        var elem = document.getElementById('myCanvas');
        // elem.onClick = alert("hello world");  - displays alert without clicking
        // elem.onClick = alert('hello world');  - displays alert without clicking
        // elem.onClick = "alert('hello world!')";  - does nothing, even with clicking
        // elem.onClick = function() { alert('hello world!'); };  - does nothing
        // elem.onClick = function() { alert("hello world!"); };  - does nothing
        var context = elem.getContext('2d');
        context.fillStyle = '#05EFFF';
        context.fillRect(0, 0, 150, 100);
    </script>

</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you draw to a canvas element, you are simply drawing a bitmap in immediate mode.

    The elements (shapes, lines, images) that are drawn have no representation besides the pixels they use and their colour.

    Therefore, to get a click event on a canvas element (shape), you need to capture click events on the canvas HTML element and use some math to determine which element was clicked, provided you are storing the elements’ width/height and x/y offset.

    To add a click event to your canvas element, use…

    canvas.addEventListener('click', function() { }, false);

    To determine which element was clicked…

    var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft + elem.clientLeft,
    elemTop = elem.offsetTop + elem.clientTop,
    context = elem.getContext('2d'),
    elements = [];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height 
            && x > element.left && x < element.left + element.width) {
            alert('clicked an element');
        }
    });

}, false);

// Add element.
elements.push({
    colour: '#05EFFF',
    width: 150,
    height: 100,
    top: 20,
    left: 15
});

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});​

    jsFiddle.

    This code attaches a click event to the canvas element, and then pushes one shape (called an element in my code) to an elements array. You could add as many as you wish here.

    The purpose of creating an array of objects is so we can query their properties later. After all the elements have been pushed onto the array, we loop through and render each one based on their properties.

    When the click event is triggered, the code loops through the elements and determines if the click was over any of the elements in the elements array. If so, it fires an alert(), which could easily be modified to do something such as remove the array item, in which case you’d need a separate render function to update the canvas.

    For completeness, why your attempts didn’t work…

    elem.onClick = alert("hello world"); // displays alert without clicking

    This is assigning the return value of alert() to the onClick property of elem. It is immediately invoking the alert().

    elem.onClick = alert('hello world');  // displays alert without clicking

    In JavaScript, the ' and " are semantically identical, the lexer probably uses ['"] for quotes.

    elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

    You are assigning a string to the onClick property of elem.

    elem.onClick = function() { alert('hello world!'); }; // does nothing

    JavaScript is case sensitive. The onclick property is the archaic method of attaching event handlers. It only allows one event to be attached with the property and the event can be lost when serialising the HTML.

    elem.onClick = function() { alert("hello world!"); }; // does nothing

    Again, ' === ".

    • 0