I am looking to create a unique HTML5 canvas setup where multiple canvases are stacked on top of each other to allow for rendering with different layers using JavaScript. The challenge is to have these canvases centered both horizontally and vertically on the document.
To achieve this, all canvases need to be transparent. To make them stand out from the black background of the document, I thought of enclosing the canvases in a div and setting the div's color. This way, the canvases would appear as a different color while remaining transparent.
However, I am struggling to find the right CSS properties to apply to the div and canvases to achieve the desired effect. Often, the div ends up spanning the width of the entire document with zero height.
The basic structure of my HTML document looks like this:
<html>
<head>
<style>
body
{
background : black;
...?
}
div
{
background : white;
...?
}
canvas
{
...?
}
</style>
</head>
<body>
<div>
<canvas></canvas>
<canvas></canvas>
<canvas></canvas>
</div>
</body>
</html>
If anyone has a solution to help me achieve a setup where the canvases are stacked, centered on the screen, and distinct from the background color, I would greatly appreciate it.