Javascript 如何使多张重叠画布一起全屏显示并保持重叠？

我想让所有重叠的HTML5画布全屏点击按钮时，我希望他们保持重叠时，全屏模式

例如，我有3张重叠的画布。此示例来自：

HTML

如果您的浏览器不支持HTML5画布，则会显示此文本。
如果您的浏览器不支持HTML5画布，则会显示此文本。
如果您的浏览器不支持HTML5画布，则会显示此文本。

全屏

...

JavaScript

var层1；
var层2；
var第3层；
var-ctx1；
var-ctx2；
var-ctx3；
var x=400；
变量y=300；
var-dx=2；
var-dy=4；
var宽度=400；
var高度=300；
var city=新图像（）；
函数init（）{
city.src=”http://html5.litten.com/layers/city.png";
layer1=document.getElementById（“layer1”）；
ctx1=layer1.getContext（“2d”）；
layer2=document.getElementById（“layer2”）；
ctx2=layer2.getContext（“2d”）；
layer3=document.getElementById（“layer3”）；
ctx3=layer3.getContext（“2d”）；
设置间隔（drawAll，20）；
}
函数drawAll（）{
draw1（）；
图2（）；
图3（）；
}
函数draw1（）{
ctx1.clearRect（0，0，宽度，高度）；
ctx1.fillStyle=“#FAF7F8”；
ctx1.beginPath（）；
ctx1.rect（0，0，宽度，高度）；
ctx1.closePath（）；
ctx1.fill（）；
ctx1.fillStyle=“#4444”；
ctx1.beginPath（）；
ctx1.弧（x，y，10，0，Math.PI*2，真）；
ctx1.closePath（）；
ctx1.fill（）；
如果（x+dx>宽度| | x+dx<0）
dx=-dx；
如果（y+dy>高度| | y+dy<0）
dy=-dy；
x+=dx；
y+=dy；
}
函数draw2（）{
ctx2.clearRect（0，0，宽度，高度）；
ctx2.drawImage（城市，0,0）；
}
函数draw3（）{
ctx3.clearRect（0，0，宽度，高度）；
ctx3.fillStyle=“#4444”；
ctx3.save（）；
ctx3.翻译（200200）；
ctx3.旋转（x/20）；
ctx3.fillRect（-15，-15,30,30）；
ctx3.restore（）；
}
函数goFullScreen（）{
var canvas1=document.getElementById（“layer1”）；
var canvas2=document.getElementById（“layer2”）；
var canvas3=document.getElementById（“layer3”）；
如果（canvas1.requestFullScreen）{
canvas1.requestFullScreen（）；
canvas2.webkitRequestFullScreen（）；
canvas3.webkitRequestFullScreen（）；
}
else if（canvas1.webkitRequestFullScreen）{
canvas1.webkitRequestFullScreen（）；
canvas2.webkitRequestFullScreen（）；
canvas3.webkitRequestFullScreen（）；
}
else if（canvas1.mozRequestFullScreen）{
canvas1.mozRequestFullScreen（）；
canvas2.webkitRequestFullScreen（）；
canvas3.webkitRequestFullScreen（）；
}
}
init（）；

我已尝试实施中讨论的内容

我试图修改

goFullScreen（）

函数，如上图所示。但这只会使第一个画布全屏显示

---

非常感谢您的帮助。

您必须从父div请求全屏显示，并在CSS中将画布元素的宽度设置为100%：

风格：

div:-webkit-full-screen>canvas {
  width: 100% !important;
}
div:-moz-full-screen>canvas {
  width: 100% !important;
}
div:-ms-fullscreen>canvas {
  width: 100% !important;
}
div:fullscreen>canvas {
  width: 100% !important;
}

Js:

function goFullScreen() {
    var parentDiv = document.getElementById("canvasesdiv");
    if (parentDiv.requestFullscreen){
        parentDiv.requestFullscreen();}
    else if(parentDiv.webkitRequestFullscreen){
        parentDiv.webkitRequestFullscreen();
    } else if(parentDiv.mozRequestFullScreen){
        parentDiv.mozRequestFullScreen();
    }
}