Create canvas over another canvas

Question

This is my HTML for an HTML5 canvas.

<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>

I would like to create another (transparent) canvas of the same dimension dynamically over this canvas. How can I do this?

This should give you the idea: http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag/12667751#12667751 — enhzflep, Mar 25 '16 at 08:36

score 1 · Answer 1 · answered Mar 25 '16 at 08:36

You can try overlaying second canvas onto first one with negative margin easily:

<canvas id="canvas" width="490px" height="220px" style="z-index:1;">
                Sorry, your browser doesn't support canvas technology.
            </canvas>
    <canvas id="canvas2" width="490px" height="220px" style="z-index:2;margin-top:-220px;" >
            </canvas>

score 1 · Answer 2 · edited May 23 '17 at 11:45

Wrap the canvas you have into a div:

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

the style the div container:

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

This will make all canvases be positioned at an absolute position (0, 0) inside the wrapper div.

"Clone" the canvas dynamically:

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);

Optionally see this answer to overlay directly with HTML and CSS only:
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>

Create canvas over another canvas

2 Answers2