Home/ Questions/Q 7774933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T17:30:09+00:00

Below is le code. I want movementCanvas underneath canvas. <html> <head> <script type=text/javascript src=game.js></script>

  • 0

Below is le code. I want movementCanvas underneath canvas.

<html>
<head>
  <script type="text/javascript" src="game.js"></script>
</head>
<body>

  <canvas id="canvas" width="710" height="597" style="border:1px solid #c3c3c3;">
    <p>Your browser doesn't support canvas!</p>
  </canvas>

  <canvas id="movementCanvas" width="710" height="597" style="border:1px solid #c3c3c3;">
  </canvas>

</body>
</html>

Second question. At a higher level, I’m trying to hide the canvas below. The movementCanvas is a color-coded map where I’ll look up what value is there when clicked, and the only way to access the pixels is by using the HTML5 canvas and context. The top “canvas” is the front end and should look nice. Does that sound like a sane way to do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use CSS’s position: absolute. Add the following CSS to your page:

    canvas {
    position: absolute;
    top: 0;
    left: 0;
}

    This will put both canvases at the same spot: the topleft-most part.

    You might want to put them in a wrapper element, which will need to be position: relative in order for its child elements to be. For example, your HTML will look something like this:

    <div class="wrapper">
    <canvas id="canvas1" width="400" height="300"></canvas>
    <canvas id="canvas2" width="400" height="300"></canvas>
</div>

    And your CSS will look like this:

    .wrapper {
    position: relative;
    width: 400px;
    height: 300px;
}

.wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

    Then position the wrapper div however you’d position the other stuff.

    • 0