drawing-app

<!DOCTYPE html>

<head>

<style>

@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;

}

</style>

<title>Drawing App</title>

</head>

<body>

</div>

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

colorEl.value = 'black'

let color = colorEl.value

let x

let y

canvas.addEventListener('mousedown', (e) => {

isPressed = true

x = e.offsetX

y = e.offsetY

})

document.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))

</script>

</body>

</html>