How do I click on an event that uses an object in the javascript canvas?

Question

This is my script code..

<body onload= "startGame()">
<script>
var Earth;
var Mercury;
var Venus;

function startGame() {
    Earth = new component(152, 183, 'earth.png', 800, 75);
    Mercury = new component(122,151, 'mercury.png', 300, 400);
    Venus = new component(152, 183, 'venus.png', 520, 240);
    GameArea.start();   
}

var GameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1000;
        this.canvas.height = 642;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas,         document.body.childNodes[0]);

        this.interval = setInterval(updateGameArea, 20);
    },

    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

//make game pieces
function component(width, height, color, x, y) {
    this.type = "image";
    this.image = new Image();
    this.image.src = color;

    this.width = width;   this.height = height;
    this.x = x;           this.y = y;

    this.update = function() {
        ctx = GameArea.context;
        ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
    }
}

function updateGameArea() {
    GameArea.clear();
    Earth.update();
    Mercury.update();
    Venus.update();
}
</script>
</body>

The code is when browser open, startGame() function is start. I draw canvas, and show planets on the canvas. Please refer to the image. This is when javascript on running image. Their has a Earth, Mercury, Venus. That planet is all object....If i thinks...

I want to click event when users click on "Earth" object.. But I don't know how to do that.... What should I refer to? Please advice to me..! Thanks.

score 1 · Accepted Answer · answered Apr 17 '17 at 12:36

You can't, really. When you're drawing on a canvas you're essentially drawing one big bitmap image. The shapes you draw get added to it and that's it. They're not actually objects.

You have two options:

Catch the click event from the canvas element, get the mouse coordinates and use that to infer which object was clicked.
Use a library like EaselJS. It's sort of an API around the canvas that makes working with it much easier. It will allow you to attach click handlers to the objects on the canvas.

score 0 · Answer 2 · edited May 23 '17 at 11:54

You're basically going to have to track where your Planets are on the canvas, then set up an event listener on the canvas itself. From there you can take the coordinates of the click event and go through all your Planets to test.

HTML:

<form id="myCanvas" ... >
</form>

Get canvas element:

var Earth = document.getElementById('myCanvas');

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

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

Check this example with informations about @Brother Woodrow said

How do I click on an event that uses an object in the javascript canvas?

2 Answers2