[JavaScript] HTML canvas 마우스로 그리기

HTML 캔버스를 이용해 그림판처럼 마우스로 그림을 그리도록 만들 수 있다.

복잡한 기능을 생각하기 전에 간단하게 시작하는 예제를 만들었다.

아무런 기능 없이 그냥 검은색 연필로 그리기만 가능하고 지우기도 안된다.

모바일 환경을 위해 touchstart, touchend, touchmove 등의 이벤트도 같이 적용했다.

 

 

 

        <div class="test-container" style="padding: 40px;background-color:lightgrey;text-align:center;">
            <canvas id="canvas" width="500" height="300" style="border: 1px solid;background-color: white;"></canvas>
        </div>

        <script>
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var getPosition = function(e) {
                var x, y;
                if(e.type.indexOf("mouse") > -1) {
                    x = e.offsetX;
                    y = e.offsetY;
                } else { 
                    var rect = e.target.getBoundingClientRect();
                    x = e.changedTouches[0].clientX - rect.x;
                    y = e.changedTouches[0].clientY - rect.y;
                }
                return {x:x, y:y};
            };
            var toggleDrawing = function(e) {
                this.drawing = e.type === "mousedown" || e.type === "touchstart";
                if(this.drawing) {
                    var pos = getPosition(e);
                    var ctx = this.getContext("2d");
                    ctx.beginPath();
                    ctx.moveTo(pos.x, pos.y);
                }
                
            }
            var draw = function(e) {
                //var pos = canvas.d
                //console.log(e, this);
                if(this.drawing) {
                    e.preventDefault();
                    var pos = getPosition(e);
                    var ctx = this.getContext("2d");
                    ctx.lineTo(pos.x, pos.y);
                    ctx.stroke();
                }
            };
            canvas.addEventListener("mousemove", draw);
            canvas.addEventListener("mousedown", toggleDrawing);
            canvas.addEventListener("mouseup", toggleDrawing);

            canvas.addEventListener("touchmove", draw); 
            canvas.addEventListener("touchstart", toggleDrawing);
            canvas.addEventListener("touchend", toggleDrawing);

        </script>