Menu
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?
570
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.
105
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
