<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #15 - The Drawing App</title>
  </head>
  <body>
    <canvas id="drawing-canvas" width="1500" height="600"></canvas>

    <div class="toolbar">
      <button id="decrease">-</button>
      <span id="size">10</span>
      <button id="increase">+</button>
      <input type="color" id="color" />
      <button id="clear">지우기</button>
    </div>

    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(212, 212, 212);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

canvas {
  border: 2px solid rgb(187, 70, 169);
}

.toolbar {
  background-color: rgb(162, 126, 191);
  display: flex;
  padding: 1rem;
  width: 1506px;
}

.toolbar > * {
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 100;
  height: 50px;
  border-radius: 50%;
  width: 50px;
  background-color: rgb(208, 140, 95);
  margin-left: 15px;
}

#clear {
  margin-left: auto;
  margin-right: 50px;
  height: 50px;
  width: 50px;
  cursor: pointer;
  outline: none;
}

#color {
  height: 30px;
  width: 30px;
}

const canvas = document.getElementById("drawing-canvas");
const increaseBtn = document.querySelector("#increase");
const decreaseBtn = document.querySelector("#decrease");
const strokeThickness = document.querySelector("#size");
const colorBtn = document.querySelector("#color");
const clearBtn = document.querySelector("#clear");

/*
******************* Canvas getContext() Method *********************
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#:~:text=getContext()%20method%20returns%20a,to%20a%20different%20context%20mode.

******************* CanvasRenderingContext2D ********************
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
*/

const ctx = canvas.getContext("2d");

let size = 10;
let isPressed = false;
let color = "black";
let x = undefined;
let y = undefined;

canvas.addEventListener("mousedown", function (e) {
  isPressed = true;
  x = e.offsetX;
  y = e.offsetY;
});

canvas.addEventListener("mouseup", function (e) {
  isPressed = false;
  x = undefined;
  y = undefined;
});

canvas.addEventListener("mousemove", function (e) {
  if (isPressed) {
    const x2 = e.offsetX;
    const y2 = e.offsetY;

    drawCircle(x2, y2);
    drawLine(x, y, x2, y2);
    x = x2;
    y = y2; 
  }
});

// Drawing Lines
function drawLine(x1, y1, x2, y2) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.strokeStyle = color;
  ctx.lineWidth = size * 2;
  ctx.stroke();
}

// Drawing Circles
function drawCircle(x, y) {
  ctx.beginPath();
  ctx.arc(x, y, size, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
}

// Increase Btn
increaseBtn.addEventListener("click", function () {
  size += 1;
  if (size > 50) {    size = 50;  }
  updateSize();
});

// Decrease Btn
decreaseBtn.addEventListener("click", function () {
  size -= 1;
  if (size < 1) {    size = 1;  }
  updateSize();
});

// Color Btn
colorBtn.addEventListener("change", function (e) {
  color = e.target.value;
});

// Clear Btn
clearBtn.addEventListener("click", function () {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
});

// Updating the Stroke Width Dynamically
function updateSize() {
  strokeThickness.innerText = size;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.