오버레이 할 때 두 캔버스를 모두 표시하는 방법은 무엇입니까?

Question

나는 this 포스트와 this 바이올린에있는 지침을 따라 갔지만 아래쪽 캔버스를 어떻게 보이게 만드는지 혼란 스럽다. 내 웹 사이트에서는 상단 캔버스의 내용 만 그려집니다.

나는 명백한 것을 놓치고있는 것처럼 느껴진다. 그러나 나는 그것이 무엇인지 모른다. 바이올린 페이지에서 특별한 일이없는 것 같고 두 캔버스가 모두 멋지게 그려져 있습니다. 라인은 하위 계층 캔버스에 그려 볼 수 없습니다입니다

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

:

여기 내 코드에서 CSS 관련 JS입니다. 나는 이것을 알고있다. 왜냐하면 나는 그것들을 나란히 놓으면 나는 그 선을 볼 수 있기 때문이다.

누구든지 해결 방법을 알고 있습니까?

Answer 1

나는 당신이 단지 최고의 캔버스 배경을 "투명하게"만들고 싶다고 생각한다. 귀하의 질문에 대한 대답이 아니라면 정확한 접근 방식으로 바이올린을 게시해야 할 수도 있습니다.

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

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