CODEWITHSUNDEEP
javascripthtmlcss
Nick Dangerous
Nick Dangerous

Reputation: 31

How do I have a canvas box on top of a canvas box?

I would like to have two canvas squares on top of each other. I know how to draw on canvas but I need to know how I can put a canvas on top of a canvas specifically. I tried setting a potion but it did not work.

<canvas id="Canvas1" width="350" height="300"
style="border:6px solid black;">
</canvas>

<canvas id="Canvas2" width="350" height="300"
style="border:6px solid black;">
</canvas>

Those just want to be separated no matter what I do.

Upvotes: 0

Views: 281

Answers (2)

see sharper
see sharper

Reputation: 12035

You need to have them both inside a div with position: relative, then set the positioning of both the canvases to absolute. They will then both be positioned at the top left corner of the container. Use z-index to specify which is in top, and left and top to tweak positioning.

<div style="position:relative">
<canvas id="Canvas1" width="350" height="300"
style="border:6px solid black; position: absolute">
</canvas>

<canvas id="Canvas2" width="200" height="200"
style="border:6px solid black; position:absolute">
</canvas>
</div>

Note I resized the second one to show the positioning better.

Upvotes: 3

A. Meshu
A. Meshu

Reputation: 4148

What do you mean by "I tried setting a potion but it did not work."?

<canvas id="Canvas1" width="350" height="300"
style="border:6px solid black; position: absolute; left: 50px;">
</canvas>

<canvas id="Canvas2" width="350" height="300"
style="border:6px solid red;">
</canvas>

Upvotes: 1

Related Questions