canvas api를 이용하여 만든 그림판

 

canvas api를 이용하여 만든 그림판

 

html

<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
<div id="wrap">
        <div class="controls_color">
            <h2>브러시 사이즈</h2>
            <div>
                <input type="range" id="paintRange" min="0.1" max="50" value="1" step="0.1" onchange='changeLineWidth()'>
            </div>
            <h2>브러시 색상</h2>
            <div id="brush">
                <input type="color" id="mainColor" onchange='changeColor()'>
            </div>
            <button onclick="filling_color()">현재색으로 채우기</button>
            <button onclick="filling_white()">모두 지우기</button>
            <button onclick="saving()">저장</button>
        </div>
        <canvas id="paint"></canvas>
 </div>

 

css

/* 초기화 */
*{margin: 0; padding: 0; box-sizing: border-box;}

#wrap{width: 100%; height: 100vh; overflow-y: auto; background-color: #1e1e1e; display: flex; justify-content: start;}
#wrap::-webkit-scrollbar{width: 0px;}

#paint{width:500px; height:500px; background-color: white; margin: auto; display: block;}
.controls_color{height: 100vh; width: 10%; background-color: rgba(0,0,0,0.1); padding: 0 1%;}
.controls_color input[type='range']{width: 100%;}
.controls_color #brush{width: 30px; height: 30px; background-color: black; border: 1px solid white;}
.controls_color input[type='color']{opacity: 0;}
.controls_color h2{color: white; font-size:16px;}
.controls_color input{margin-bottom: 10px;}
.controls_color button{width: 100%; display: block; margin: 10px 0;}

 

js

 const canvas = document.getElementById('paint');
const ctx = canvas.getContext('2d');
mainColor = document.getElementById('mainColor').value;

const CANVAS_SIZE = 500;

canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;
ctx.strokeStyle = mainColor;
ctx.lineWidth = '1.0';
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);

let painting = false;

function onMouseMove(event){
     const x =  event.offsetX;
     const y =  event.offsetY;
     if(!painting){
           ctx.beginPath();
           ctx.moveTo(x, y);
     }else{
           ctx.lineTo(x, y);
           ctx.stroke();
     }
}

function startPainting(event){
     painting = true;
}

function stopPainting(){
     painting = false;
}

function changeColor(){
     color = $('#mainColor').val();
     ctx.strokeStyle = color;
     $('#brush').attr('style','background-color :'+color);
}

function changeLineWidth(){
     lw = $('#paintRange').val();
     ctx.lineWidth = lw;
}
        
function filling_white() {
     ctx.fillStyle = 'white';
     ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
}

function filling_color() {
     mainColor = document.getElementById('mainColor').value;
     ctx.fillStyle = mainColor;
     ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
}

function handleCM(event) {
     event.preventDefault();
}

function saving() {
     const image = canvas.toDataURL();
     const link = document.createElement("a");
     link.href = image;
     link.download = "myImage";
     link.click();
}

if(canvas){
     canvas.addEventListener("mousemove",onMouseMove);
     canvas.addEventListener("mousedown",startPainting);
     canvas.addEventListener("mouseup",stopPainting);
     canvas.addEventListener("mouseleave",stopPainting);
     canvas.addEventListener("contextmenu", handleCM);
}

 

캔버스를 이용하여 만든 그림판

소스코드는 노마드코더의 그림판 만들기를 참고하여 응용하여 만들었음