노마드 코더 - 바닐라 JS로 그림 앱 만들기- 선그리기

내가 만든 조개

누추한 조개껍데기 만드는방법

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;

ctx.lineWidth = 2;

const colors = [
    "#FFAD9E",
    "#D7AFFF",
    "#B3D89C",
    "#9FE2BF",
    "#F0F0F0",
    "#A2B9F2",
    "#E2B1E1",
    "#B8E080",
    "#FFD1DC"
]

function onclick(event){
    console.log(event);

    ctx.beginPath();
    ctx.moveTo(0,0);
    const color = colors[Math.floor(Math.random() * colors.length)];
    ctx.strokeStyle = color;
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
}
canvas.addEventListener("mousemove", onclick)

console.log(event)에서 offsetX와 offsetY의 좌표를 확인해야함