Issue with mouse coordinates using HTML5 canvas

Question

Fairly new to JavaScript/HTML5 Canvas. Having trouble making a specific area of my background clickable so that it opens up another page. What I want to do is make a selected area of my background clickable, rather then the entire background.

<!DOCTYPE HTML>                  
<html lang="en-US">
 <head>
  <meta charset="UTF-8">
  <title>Adventures of Balthazar</title>

  <link rel="stylesheet" type="text/css" href="menu.css" />
  <script type="text/javascript">
  function init(){   
   var canvas = document.getElementById('myCanvas');
   var ctx = canvas.getContext('2d');
   var img = new Image();
   var mouseX = 0;
   var mouseY = 0;
   var btnPlay = new Button(250,555,162,284);

   document.addEventListener('click',mouseClicked,false);

   img.onload = function() {
    ctx.drawImage(img, 0,0);
   }

   img.src='img/menu.png'

   function Button(xL,xR,yT,yB){
    this.xLeft = xL;
    this.xRight = xR;
    this.yTop = yT;
    this.yBottom = yB;
   }

   Button.prototype.checkClicked = function(){
    if(this.xLeft <= mouseX &&
        mouseX <= this.xRight &&
        this.yTop <= mouseY &&
        mouseY <= this.yBottom) 
     return true;
   }

   function playGame(){
    window.location.href = 'index.html'
   }

   function mouseClicked(e){
    mousex = e.pageX - canvas.offsetLeft;
    mousey = e.pageY - canvas.offsetTop;

    if(btnPlay.checkClicked()) playGame();
   }
  }
  </script>     
 </head> 

 <body onLoad="init()">
  <div id="canvas-container">
   <canvas id="myCanvas" width="800" height="600"> </canvas>
  </div>    
 </body>
</html>

Answer 1

Here's a working version of your code:

http://jsfiddle.net/3PFXa/1/

There were two things that I tweaked. (1) you declared var mouseX but you set a "mousex"; (2) use x, y, width and height instead of using left, right, top and bottom coordinates to define your clickable area. This fits nicer with the canvas layout.

Here's the updated code:

function init() {

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    var mouseX = 0;
    var mouseY = 0;
    var btnPlay = new Button(280, 145, 20, 20);

    document.addEventListener('click', mouseClicked, false);

    img.onload = function () {
        ctx.drawImage(img, 0, 0);

        ctx.fillStyle = "#0f0";
        ctx.rect(btnPlay.x, btnPlay.y, btnPlay.w, btnPlay.h);
        ctx.fill();

    }

    img.src = 'http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg'

    function Button(x, y, w, h) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
    }

    Button.prototype.checkClicked = function () {

        if ( mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) 
            return true;

    }

    function playGame() {
        alert("hello!");
    }

    function mouseClicked(e) {

        mouseX = e.pageX - canvas.offsetLeft;
        mouseY = e.pageY - canvas.offsetTop;

        if (btnPlay.checkClicked()) playGame();
    }
}

Issue with mouse coordinates using HTML5 canvas

Question

1 answers

solution1
0 ACCPTED 2014-07-09 00:23:59

Issue with mouse coordinates using HTML5 canvas

Question

1 answers

solution1 0 ACCPTED 2014-07-09 00:23:59

solution1
0 ACCPTED 2014-07-09 00:23:59