I cannot draw canvas in canvas

Question

I want to draw two independent canvas-a but in each other.

<!DOCTYPE html> <html style="color:white;"> <head> <meta charset="utf-8" /> <title> evilGame </title> </head> <body> <canvas id="canvas" width="800" height="600" style="border: 1px solid black"> <canvas id="smallCanvas" width="800" height="550" style="background: red"> </canvas> </canvas> </body>

The problem is that the larger one is drawn and the smaller one is not (although it is visible in the code).

Zoltan Toth Zoltan Toth 1,755 7 18 · Accepted Answer · 2016-10-26T17:07:03

The specification clearly indicates that this is not possible:

The contents of the canvas element, if any, are the element's fallback content .

And fallback content is the content that will be visible if the external element cannot be displayed ( source ):

It can not be used (for example, because it is the unsupported format).

To achieve something similar to your task, you can use 2 absolutely positioned canvases:

 <canvas width="500" height="300" style="background: black;"> </canvas> <canvas width="400" height="200" style="background: red; position: absolute; left: 50px; top: 50px;"> </canvas>

But in general, canvas'y needed to draw on them, and not lay one over the other ...
I don’t know what prevents the author from simply drawing everything on one canvas, but if given the condition that they need exactly 2, then unfolding is the only option ...

I cannot draw canvas in canvas

1 answer 1

More articles: