Home/ Questions/Q 6779159
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T16:21:08+00:00

I am using HTML 5 for the first time, and playing around with this

  • 0

I am using HTML 5 for the first time, and playing around with this HTML5 canvas tutorial.

I have changed the example to include 4 images and I want to be able to detect which image was clicked on before doing a redirect on the click event.

Here is my code as it currently is, can somebody tell me how I could detect which image has been clicked in my click event? Also, the mouseout event seems to not always resize the image, any ideas why?

<!DOCTYPE HTML>
<html>
<head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        #myCanvas {
            border: 0px;
        }
    </style>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic2d-v1.0.4.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script>
        function initRectangles(rectangles){
            // initialize an array of rectangles that provide
            // rectangular paths and properties for the images
            return [{
                name: "buffalo",
                image: null,
                x: 40,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }, {
                name: "indianapolis",
                image: null,
                x: 125,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }, {
                name: "miami",
                image: null,
                x: 210,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }, {
                name: "nyjets",
                image: null,
                x: 295,
                y: 45,
                width: 80,
                height: 80,
                scale: 1
            }];
        }

        function loadImages(sources, callback){
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            for (var src in sources) {
                numImages++;
            }
            for (var src in sources) {
                images[src] = new Image();
                images[src].onload = function(){
                    if (++loadedImages >= numImages) {
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }

        function mapImages(rectangles, images){
            // map images to rectangles
            var counter = 0;
            for (var img in images) {
                rectangles[counter++].image = images[img];
            }
        }

        function initStage(images){
            var rectangles = initRectangles(rectangles);
            mapImages(rectangles, images);

            kin = new Kinetic_2d("myCanvas");
            var context = kin.getContext();

            kin.setDrawStage(function () {
                this.clear();
                var mousePos = kin.getMousePos();

                for (var n = 0; n < rectangles.length; n++) {
                    var rect = rectangles[n];

                    context.save();
                    context.translate(rect.x, rect.y);
                    context.scale(rect.scale, rect.scale);
                    kin.beginRegion();
                    var rectX = -1 * rect.width / 2;
                    var rectY = -1 * rect.height / 2;
                    context.drawImage(rect.image, rectX, rectY, rect.width, rect.height);
                    context.beginPath();
                    context.rect(rectX, rectY, rect.width, rect.height);
                    context.closePath();

                    this.addRegionEventListener("mouseover", function () {
                        document.body.style.cursor = "pointer";
                        rectangles[n].scale = 1.07;
                    });
                    this.addRegionEventListener("mouseout", function () {
                        document.body.style.cursor = "default";
                        rectangles[n].scale = 1;
                    });

                    this.closeRegion();
                    context.restore();
                }
            });
        }

        window.onload = function(){
            var sources = {
                buffalo: "buffalo.png",
                indianapolis: "indianapolis.png",
                miami: "miami.png",
                nyjets: "nyjets.png"
            };

            loadImages(sources, initStage);

            $("#myCanvas").click(function (e) {


            }); 
        };
    </script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="90">
    </canvas>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try using event mouseup:

    this.addRegionEventListener("mouseup", function() {
    alert("mouse up");
});
    • 0