An example of using DIV tags for hit testing

  Read comments... Posted on 16th August 2013

Summary
This page shows you an example of using DIV tags that are placed over the canvas to facilitate easy hit testing. These DIV tags are then hooked up to event listeners (eg onmousemove and/or onclick).

[No canvas support]

If you can control the end-user environment and your use-case allows it you may find that using DIV tags can simplify your canvas hit testing greatly. It involves placing DIV tags over the canvas and assigning the event listeners to them instead of handling a click on the canvas itself. It reduces the work involved because the necessary calculations for the pointer location and whether it's over a particular shape are eliminated. The shapes that are available to you is limited to rectangles and circles (by using the border-radius: CSS property.

Reliability

As a method for adding hit testing to your canvas it can work quite well and can save you a lot of time - if you can control the end-user environment (particularly if you have an easy way of creating DIV tags such as jQuery). But if you can't then it might not be entirely reliable (for example zooming the browser window can throw the positioning out).


<script>
    window.onload = function ()
    {
        // Get the canvas references
        var ca = document.getElementById("cvs");
        var co = ca.getContext('2d');
        
        // Draw the rectangle
        co.fillStyle = 'red';
        co.fillRect(50,50,100,100);
        
        // Draw the circle
        co.fillStyle = 'green';
        co.beginPath();
        co.arc(450, 125, 50, 0, 2 * Math.PI, false);
        co.fill();
        
        /**
        * Get the coords of the canvas tag
        */
        var canvasXY = RGraph.getCanvasXY(ca);
        
        /**
        * Now create and position the square DIV tag
        */
        var div1 = document.createElement('DIV');
            div1.style.position = 'absolute';
            div1.style.top   = canvasXY[1] + 50 + 'px';
            div1.style.left  = canvasXY[0] + 50 + 'px';
            div1.style.width = '100px';
            div1.style.height = '100px';
            div1.style.cursor = 'pointer';
            div1.onclick = function (e)
            {
                alert('The red square has been clicked!');
            }
        document.body.appendChild(div1);
        
        /**
        * Now create and position the circle DIV tag
        */
        var div2 = document.createElement('DIV');
            div2.style.position = 'absolute';
            div2.style.top   = canvasXY[1] + 125  - 50 + 'px';
            div2.style.left  = canvasXY[0] + 450 - 50 + 'px';
            div2.style.width = '100px';
            div2.style.height = '100px';
            div2.style.borderRadius = '50px';
            div2.style.cursor = 'pointer';
            div2.onclick = function (e)
            {
                alert('The green circle has been clicked!');
            }
        document.body.appendChild(div2);
    }
</script>
Share RGraph
X

Comments