Create a linkable button to go to next page in Canvas HTML5 game

Question

Hi I'm developing an HTML5 game and would like to know how I can get my button to go to the next page.

I originally had my button drawn on the canvas with the other canvas elements but I couldn't get this to work. So I've tried the following code in making the button a separate entity. but it still isn't working.

HTML

<body onload="init()">
    <div class="canvas-container">
       <canvas id="canvas" width="868" height="609"></canvas>

       <img alt="sand" id="image2" style="display: none" src="file:///Users/katiesakalauskas/Desktop/KnowledgeDraw/images/sand.png" />
       <img alt="seal" id="image3" style="display: none" src="file:///Users/katiesakalauskas/Desktop/KnowledgeDraw/images/seal.png" />
       <img alt="pinkfish" id="image4" style="display: none" src="file:///Users/katiesakalauskas/Desktop/KnowledgeDraw/images/pinkfish.png" />
       <img alt="board" id="image5" style="display: none" src="file:///Users/katiesakalauskas/Desktop/KnowledgeDraw/images/board.png" />
       <img alt="inkie" id="image6" style="display: none" src="file:///Users/katiesakalauskas/Desktop/KnowledgeDraw/images/inkie.png" />

      </div> 
    <div>

    <!-- THE BUTTON I WANT TO WORK -->

    <input type="image" class="enter" src="../images/enterbutton.png" onclick="javascript:window.location='mainmenu.html'"/>

    </div>
</body>

JavaScript

function init() {

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  background(ctx);
}

function background(ctx) {

  var gradient;

  // background/background
  // This artwork uses an unsupported "Multiply" blending mode
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(863.0, 606.5);
  ctx.lineTo(63.5, 606.5);
  ctx.lineTo(63.5, 6.9);
  ctx.lineTo(863.0, 6.9);
  ctx.lineTo(863.0, 606.5);
  ctx.closePath();
  gradient = ctx.createLinearGradient(588.1, -6.8, 319.4, 668.1);
  gradient.addColorStop(0.00, "rgb(204, 228, 191)");
  gradient.addColorStop(0.42, "rgb(163, 215, 195)");
  gradient.addColorStop(1.00, "rgb(121, 202, 198)");
  ctx.fillStyle = gradient;
  ctx.fill();
  ctx.restore();
}

why not use `Main Menu`. Also an input type of `image` is totally not what you want here. at the very least use a ` — Ryan, Apr 18 '16 at 21:41
Ok I figured out what I was doing wrong, I guess my additional question would be if it is possible to make canvas element images a clickable button, or do they always have to be seperate? — Katie Sak, Apr 18 '16 at 21:43
@KatieSak You can make it "clickable" by [checking where the canvas was clicked and checking if your button falls in that space](http://stackoverflow.com/questions/5014851/get-click-event-of-each-rectangle-inside-canvas). But it's a whole lot easier to just use an `` tag then overlay it on the canvas. — Mike Cluck, Apr 18 '16 at 21:45
hmmm since I'm using a image as a button the tag doesn't seem to be working, the image/button dissappears completely when I use the above. By overlay do you mean set the z-index to a positive integer? — Katie Sak, Apr 18 '16 at 21:53
You have to give the `a` tag a `display: block` style for it to have a background image. — Ryan, Apr 18 '16 at 21:59

Create a linkable button to go to next page in Canvas HTML5 game

0 Answers0