CODEWITHSUNDEEP
javascripthtmlcanvas
Ryan Peschel
Ryan Peschel

Reputation: 11986

How to show both canvases when overlaying them?

I followed the instructions in this post and this fiddle but I am confused as to how to make the lower canvas visible. In my website only the contents of the upper canvas are being drawn.

I feel like I'm missing something obvious but I'm not sure what it is. On the fiddle page there doesn't seem to be anything special going on and both canvases are drawn just fine.

Here's the CSS and relevant JS from my code:

#container {
    position: relative;
}

#drawingCanvas {
    position: absolute;
    left: 0px;
    top: 0px;
}

   **JAVASCRIPT**:
previewContext.strokeStyle = "#000";
previewContext.beginPath();
previewContext.moveTo(5, 5); // just testing
previewContext.lineTo(50, 50); // testing
previewContext.stroke();

The line is drawn on the lower layer canvas and is not visible. I know this because if I put them side by side I can see the line drawn.

Does anyone know how to fix this?

Upvotes: 0

Views: 107

Answers (1)

Jared Farrish
Jared Farrish

Reputation: 49188

I think you just want to make the top canvas background "transparent". You might need to post a fiddle with your exact approach, though, if this doesn't answer your question.

#drawCanvas {
    position:absolute;
    top:0;
    left:0;
    background: 0;
}

http://jsfiddle.net/userdude/zbTzq/4/

Upvotes: 1

Related Questions