分层 HTML5 画布高度/宽度重置为 300x150 像素答案

【问题标题】：Layered HTML5 Canvases Height/Width Resetting to 300x150px分层 HTML5 画布高度/宽度重置为 300x150 像素
【发布时间】：2015-11-23 15:30:53
【问题描述】：

我正在尝试将两个画布分层，以便一个有背景图像，另一个可以有不同的图像。当我将它们分层时，宽度和高度将重置为画布的默认 300x150 像素，而不是尊重我放入的宽度/高度。id 为“c”的画布是我的顶层

这是我的 HTML：

<div class="col-md-6">
            <div style="position:relative; border:1px solid">
                <canvas id="b" style="position:absolute; left:0; top:0; z-index:1; width:640px; height:429px;"></canvas>
                <canvas id="c" style="position:absolute; left:0; top:0; z-index:2; width:640px; height:429px;"></canvas>
</div>

我正在使用 fabric.js 创建画布，如下所示：

var canvasb = new fabric.Canvas('b');
canvasb.setBackgroundImage('imgs/mybackgroundimage.png', canvasb.renderAll.bind(canvasb));

var canvas = new fabric.Canvas('c');

【问题讨论】：

标签： javascript css html

【解决方案1】：

我不确定您是否可以在 style 部分中设置宽度和高度，您为什么不尝试这种方式：

<canvas id="b" width="640" height="429" style="position:absolute; left:0; top:0; z-index:1;"></canvas>

（参考：http://www.w3schools.com/html/html5_canvas.asp）

此外，此参考可能有助于区分通过属性设置大小和 CSS：

Size of HTML5 Canvas via CSS versus element attributes

【讨论】：

我试过这个，但不是覆盖画布而是堆叠。这是当前代码：
它似乎在它自己的页面中工作，但我正在运行引导程序并想知道页面上是否与引导程序发生冲突