믹아의 개발일기

canvas 를 사용중인데 그리기용 캔버스랑 보여주기용 캔버스 2개를 겹쳐서 사용하고 있었다.

그래서 그리기용 캔버스가 앞에 있어야 마우스 클릭이 돼서 그릴 수 있었는데 그러다보니 

보여주기 캔버스가 그리기용 그림에 덮여버리는 현상이 있었다. js 코드를 어떻게 바꾸면 되긴 되겠지만.. 귀찮아서

다른 방법을 찾아봤다.

<canvas id="realtimeCanvas" style="position: absolute;"></canvas>
<canvas id="canvas" style="position: absolute;"></canvas>

canvas 가 클릭, 그리기용 이었고, realtimeCanvas 가 실시간으로 계속 변경되는 캔버스였다.

그런데 realtimeCanvas 가 자꾸 뒤에 그려지다 보니 

<canvas id="canvas" style="position: absolute;"></canvas>
<canvas id="realtimeCanvas" style="position: absolute;"></canvas>

순서를 바꾸니깐 canvas 에 걸어둔 클릭 이벤트가 안되더라..

그래서 찾은게

pointer-events: none;

CSS 에 적어도 좋고

<canvas id="canvas" style="position: absolute;"></canvas>
<canvas id="realtimeCanvas" style="pointer-events: none; position: absolute;"></canvas>

나는 캔버스 쪽은 그냥 간단하게 이렇게 적었다.

펑소에 html 코딩을 할 때 button 등에 데이터를 저장하기 위해

<button id="data1"> 버튼 1 </button>
<button id="data2"> 버튼 2 </button>
<button id="data3"> 버튼 3 </button>
<button id="data4"> 버튼 4 </button>

이렇게 야매로 많이 했었다. 근데 관리해야할 데이터가 좀 많아져서 찾아보니 다른 방법이 있더라.

<button id="btn1" data-test="value"> 버튼 </button>

<script type="text/javascript">
	document.getElementById("btn1").addEventListener("click", function(){
        console.log(this.dataset.test);
    })
</script>

<!-- console
value
-->

data- 뒤에 원하는 변수명을 입력하고 값을 지정해준다.

그리고 DOM을 얻어와 dataset.변수명으로 구해올 수 있다.

<button id="btn1" data-test="value" data-test2="value2"> 버튼 </button>

<script type="text/javascript">
	document.getElementById("btn1").addEventListener("click", function(){
        console.log(this.dataset);
    })
</script>

<!-- console
 { test : "value" , test2 : "value2" }
-->

데이터를 여러개 넣어서 구해오고 싶으면 더 추가하면 된다.