JSFiddle - React, Tailwind, and code Playground

by FullMoon

HTML

<h1>마우스 그림판</h1>
<div id="boardContainer"></div>

CSS

#boardContainer{
  position:relative;
  height: 300px;
  border: 5px solid black;
  background:#fff
}

JavaScript

var STATUS_PEN = 'pen';
var board = document.getElementById('boardContainer');
var tools = document.getElementsByTagName('drowtool');
var status = null;
var tool = null;

board.addEventListener('mousedown', function(event){
  // 마우스 왼쪽 버튼이 올라온 경우 등록된 상태 해제
  if (event.button === 0) {
    status = STATUS_PEN;
  }
});

board.addEventListener('mouseup', function(event){
  if (event.button === 0) {
    status = null;
  }
});

board.addEventListener('mousemove', function(event){
  if (status === STATUS_PEN) {
    var div = document.createElement('div');
    div.style.width = '1px';
    div.style.height = '1px';
    div.style.backgroundColor = 'blue';
    div.style.position = 'absolute';
    div.style.left = event.offsetX + 'px';
    div.style.top = event.offsetY + 'px';
    board.appendChild(div);
  }
});