mouse click events in javascript using the html5 canvas

Question

Looking for some advice with a little game I'm making.

It's an investment simulator. Nothing fancy, just a project to test my ability with javascript so far.

I'm trying to create a buy button, but it's proving very difficult.

From what I can see there are no fancy imports for the implementation of javascript buttons onto an HTML5 canvas.

Please take a look at my js file and see what you think the issue is.

So far, when I execute this code as it is, the program doesn't run. If you remove the if statements from the productDetails function, it will run but there is no functionality as yet, that's where I need support.

thanks, James.

Code as follows:

    function handleMouseMove(evt) {
    Game.mousePosition = { x : evt.clientX, y : evt.clientY };
}

var Game = {
    canvas : undefined,
    ctx : undefined,
    vendMachCost : undefined,
    vendMachRev : undefined,
    vendMachOwned : undefined,
    fruitMachCost : undefined,
    fruitMachRev : undefined,
    fruitMachOwned : undefined,
    pubCost : undefined,
    pubRev : undefined,
    pubOwned : undefined,
    nightClubCost : undefined,
    nightClubRev : undefined,
    nightClubOwned : undefined,
    carShowCost : undefined,
    carShowRev : undefined,
    carShowOwned : undefined,
    aucHouseCost : undefined,
    aucHouseRev : undefined,
    aucHouseOwned : undefined
};

Game.start = function () {
    Game.canvas = document.getElementById("canvas");
    Game.ctx = canvas.getContext("2d");
    Game.vendMachCost = 2000;
    Game.vendMachRev = 100;
    Game.vendMachOwned = 0;
    Game.fruitMachCost = 3000;
    Game.fruitMachRev = 250;
    Game.fruitMachOwned = 0;
    Game.pubCost = 250000;
    Game.pubRev = 4000;
    Game.pubOwned = 0;
    Game.nightClubCost = 800000;
    Game.nightClubRev = 20000;
    Game.nightClubOwned = 0;
    Game.carShowCost = 10000000;
    Game.carShowRev = 120000;
    Game.carShowOwned = 0;
    Game.aucHouseCost = 25000000;
    Game.aucHouseRev = 750000;
    Game.aucHouseOwned = 0;
    document.onmousemove = handleMouseMove;
    window.setTimeout(Game.run, 500);
};

document.addEventListener('DOMContentLoaded', Game.start);

Game.clearCanvas = function () {
    Game.ctx.clearRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.drawBg = function () {
    Game.ctx.beginPath();
    Game.ctx.fillStyle = "darksalmon";
    Game.ctx.fillRect(0, 0, Game.canvas.width, Game.canvas.height);
};

Game.productDetails = function (product, cost, revenue, owned, posX, posY) {
  Game.ctx.beginPath();
    Game.ctx.fillStyle = "cyan";
    Game.ctx.fillRect(posX, posY, 125, 100);
    Game.ctx.fillStyle = "black";
    Game.ctx.strokeRect(posX, posY, 125, 100);
    Game.ctx.fillStyle = "darkSlateGrey";
    Game.ctx.font = "10px Arial";
    Game.ctx.textAlign = "left";
    Game.ctx.fillText(product, posX+5, posY+20);
    Game.ctx.fillText("Price: " + cost, posX+5, posY+40);
    Game.ctx.fillText("Weekly Revenue: " + revenue, posX+5, posY+60);
    Game.ctx.fillText("Owned: " + owned, posX+5, posY+80);
    if (Game.mousePosition.y >= posY && Game.mousePosition.y <= posY+100) {
        if (Game.mousePosition.x >= posX && Game.mousePosition.x <= posX+125) {
            document.click(function () {
                owned += 1;
            });
            }
        }
    }
};

Game.buyButton = function (title, x, y) {

}

Game.update = function () {

};

Game.draw = function () {
    Game.clearCanvas();
    Game.drawBg();
    Game.productDetails("Vending Machine", Game.vendMachCost, Game.vendMachRev, Game.vendMachOwned, 25, 100);
    Game.productDetails("Fruit Machine", Game.fruitMachCost, Game.fruitMachRev, Game.fruitMachOwned, 25, 225);
    Game.productDetails("Pub", Game.pubCost, Game.pubRev, Game.pubOwned, 25, 350);
    Game.productDetails("Night Club", Game.nightClubCost, Game.nightClubRev, Game.nightClubOwned, 400, 100);
    Game.productDetails("Car Showroom", Game.carShowCost, Game.carShowRev, Game.carShowOwned, 400, 225);
    Game.productDetails("Auction House", Game.aucHouseCost, Game.aucHouseRev, Game.aucHouseOwned, 400, 350);
};

Game.run = function () {
    Game.update();
    Game.draw();
    window.setTimeout(Game.run, 1000 / 60);
};

Answer 1

Your solution seems like a lot of work to do just for handling "buy" button. You are constantly tracking mouse movement and there's a lot hardcoded button positions which is also not good.

One way to do it is with regular <button> style and position it with css on top of your canvas and use javascript only for adding click event listener to it and for hiding/showing it if you need to. This way you avoid doing unnecessary things and the logic will come down to toggle hide/show and "buying" functionality.