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.

Brother Woodrow · Accepted Answer · 2017-04-17 12:36:01Z

1

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.

answered Apr 17, 2017 at 12:36

Brother Woodrow

6,3923 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:54:34Z

0

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

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Apr 17, 2017 at 12:35

Sayuri Mizuguchi

5,3403 gold badges31 silver badges58 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related