[React] Canvas 레이아웃 2개 겹치기

 

제가 진행하는 개발코드는

하나의 캔버스엔 이미지를 출력해주고

그 위에 똑같은 사이즈의 캔버스에 클릭이벤트가 생성 됩니다.

 

캔버스 한개로 이벤트 생성 가능하나

클릭 이벤트시 활성화된 곳이 변경 되는 이벤트여서 캔버스의 리셋이 필요했습니다.

 

 canvas 2개 를 css로 간단하게 겹치기 가능합니다.

<div className='leftBox' ref={imgBoxRef} >
  <canvas className="canvas" 
          ref={canvasRef} 
          >
  </canvas>
  <canvas className="canvas" 
          ref={canvas2Ref} 
          onClick={(e)=>onBboxCanvas(e)}
          >
  </canvas>
</div>

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