arrays - 在另一个 Canvas 上创建 Canvas

Question

这是我的 HTML5 Canvas 的 HTML。

<div id="board">
    <h1>Draw Here</h1>
        <canvas id="canvas" width="490px" height="220px">
            Sorry, your browser doesn't support canvas technology.
        </canvas>
    Colour: 
    <select id="selectColor">
              <option id="colBlack" value="black" selected="selected">Black</option>
              <option id="colRed" value="red">Red</option>
              <option id="colBlue" value="blue">Blue</option>
              <option id="colGreen" value="green">Green</option>
              <option id="colOrange" value="orange">Orange</option>
              <option id="colYellow" value="yellow">Yellow</option>
    </select>
    Thickness: 
    <select id="selectThickness">
              <option id="thin" value="3">Thin</option>
              <option id="normal" value="5" selected="selected">Normal</option>
              <option id="thick" value="7">Thick</option>
    </select>
    Draw type: 
    <select id="drawType">
              <option id="line" value="line" selected="selected">Line</option>
              <option id="path" value="path">Path</option>
              <option id="rectangle" value="rectangle">Rectangle</option>
    </select>
</div>

我想在此 Canvas 上动态创建另一个相同尺寸的(透明) Canvas 。我怎样才能做到这一点？

Answer 1

将 Canvas 包裹到 div 中:

<div class="stack">
    <canvas ...></canvas>
</div>

div 容器的样式:

.stack {
    position:relative;
    }
.stack canvas {
    position:absolute;
    left:0;
    top:0;
    }

这将使所有 Canvas 位于包装 div 内的绝对位置 (0, 0)。

动态“克隆” Canvas :

var canvas = document.getElementById("canvas"),
    topCanvas = document.createElement("canvas");

// set size:
topCanvas.width = canvas.width;
topCanvas.height = canvas.height;

// insert into DOM on top:
canvas.parentNode.insertBefore(topCanvas, canvas);

可以选择查看此答案，仅直接使用 HTML 和 CSS 进行覆盖:
Stacking mutliple canvases in HTML5

// Will insert a medium transparent blue canvas on top of a red
// producing purple canvas to show they are perfectly overlapping.
var canvas = document.getElementById("canvas"),
    topCanvas = document.createElement("canvas");

// set size:
topCanvas.width = canvas.width;
topCanvas.height = canvas.height;

// insert into DOM on top:
canvas.parentNode.insertBefore(topCanvas, canvas);

.stack {position:relative}
.stack canvas {
  position:absolute;
  left:0;
  top:0;
  border:1px solid #000;
  background:rgba(255,0,0,0.5)
}
canvas:first-child { background:rgba(0,0,255,1)}

<div class="stack">
  <canvas id="canvas"></canvas>
</div>