From 6c7994dc129c789a75a63aea2862af6c2bb6a2f6 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Thu, 12 Nov 2020 15:04:57 -0500 Subject: [PATCH] Drawing app --- drawing-app/index.html | 21 +++++++++++ drawing-app/script.js | 85 ++++++++++++++++++++++++++++++++++++++++++ drawing-app/style.css | 46 +++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 drawing-app/index.html create mode 100644 drawing-app/script.js create mode 100644 drawing-app/style.css diff --git a/drawing-app/index.html b/drawing-app/index.html new file mode 100644 index 0000000..8edb4e2 --- /dev/null +++ b/drawing-app/index.html @@ -0,0 +1,21 @@ + + + + + + + Drawing App + + + +
+ + 10 + + + +
+ + + + diff --git a/drawing-app/script.js b/drawing-app/script.js new file mode 100644 index 0000000..cb66181 --- /dev/null +++ b/drawing-app/script.js @@ -0,0 +1,85 @@ +const canvas = document.getElementById('canvas'); +const increaseBtn = document.getElementById('increase'); +const decreaseBtn = document.getElementById('decrease'); +const sizeEL = document.getElementById('size'); +const colorEl = document.getElementById('color'); +const clearEl = document.getElementById('clear'); + +const ctx = canvas.getContext('2d'); + +let size = 10 +let isPressed = false +let color = 'black' +let x +let y + +canvas.addEventListener('mousedown', (e) => { + isPressed = true + + x = e.offsetX + y = e.offsetY +}) + +canvas.addEventListener('mouseup', (e) => { + isPressed = false + + x = undefined + y = undefined +}) + +canvas.addEventListener('mousemove', (e) => { + if(isPressed) { + const x2 = e.offsetX + const y2 = e.offsetY + + drawCircle(x2, y2) + drawLine(x, y, x2, y2) + + x = x2 + y = y2 + } +}) + +function drawCircle(x, y) { + ctx.beginPath(); + ctx.arc(x, y, size, 0, Math.PI * 2) + ctx.fillStyle = color + ctx.fill() +} + +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() +} + +function updateSizeOnScreen() { + sizeEL.innerText = size +} + +increaseBtn.addEventListener('click', () => { + size += 5 + + if(size > 50) { + size = 50 + } + + updateSizeOnScreen() +}) + +decreaseBtn.addEventListener('click', () => { + size -= 5 + + if(size < 5) { + size = 5 + } + + updateSizeOnScreen() +}) + +colorEl.addEventListener('change', (e) => color = e.target.value) + +clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) diff --git a/drawing-app/style.css b/drawing-app/style.css new file mode 100644 index 0000000..8c45752 --- /dev/null +++ b/drawing-app/style.css @@ -0,0 +1,46 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #f5f5f5; + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; +} + +canvas { + border: 2px solid steelblue; +} + +.toolbox { + background-color: steelblue; + border: 1px solid slateblue; + display: flex; + width: 804px; + padding: 1rem; +} + +.toolbox > * { + background-color: #fff; + border: none; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 2rem; + height: 50px; + width: 50px; + margin: 0.25rem; + padding: 0.25rem; + cursor: pointer; +} + +.toolbox > *:last-child { + margin-left: auto; +}