마우스·터치로 그리는 그림판 캔버스

제작 과정

한 줄 요약

Pointer/터치로 선을 그리고 색굵기지우개를 바꾸며, 결과를 PNG로 저장하는 canvas 드로잉 보드입니다.

이럴 때 필요해요

서명, 간단한 메모 스케치, 이미지 위 주석처럼 "직접 그려서 남기는" 입력이 필요할 때 canvas 한 장이면 충분합니다. 무거운 라이브러리 없이도 부드러운 선과 저장 기능을 만들 수 있습니다.

어떻게 동작하나

pointerdown에서 시작점을 잡고, pointermove마다 직전 점과 현재 점을 lineTo로 이어 선을 그립니다.
lineCaplineJoin을 round로 둬 끊김 없이 부드럽게 이어지고, 탭 한 번도 점으로 남습니다.
저장은 toDataURL로 PNG를 만들어 다운로드합니다.

놓치기 쉬운 것

devicePixelRatio로 백킹 스토어를 키우고 컨텍스트를 scale하지 않으면 선이 흐릿하게 보입니다.
터치 기기에서 스크롤과 충돌하지 않도록 touch-action: none을 줘야 합니다.
네이티브 십자 커서 대신 실제 브러시 크기의 원을 보여주면 결과를 예측하기 쉬워집니다.

이런 곳에 써요

전자 서명, 메모낙서 입력
이미지 주석, 화이트보드협업 스케치의 기초

import type { Metadata } from "next"; import { DrawBoard } from "./-components/DrawBoard"; export const metadata: Metadata = { title: "그림판 캔버스 (데모)", description: "Pointer·터치로 그리는 canvas 드로잉 보드 — 색상·브러시 굵기·지우개·전체 지우기·PNG 다운로드. DPR 보정으로 또렷한 선.", robots: { index: false, follow: false }, }; export default function Page() { return ( <main className="flex min-h-[100dvh] items-center justify-center bg-gradient-to-br from-slate-50 via-white to-violet-50/40"> <DrawBoard /> </main> ); }