<!doctype html>

Drawing Board

Размер кисти:

Drawing Board

Размер кисти:

const canvas = document.getElementById(«whiteboard»);
const context = canvas.getContext(«2d»);

let drawing = false;

canvas.addEventListener(«mousedown», () => {
drawing = true;
context.beginPath();
});

canvas.addEventListener(«mouseup», () => {
drawing = false;
context.closePath();
});

canvas.addEventListener(«mousemove», draw);

function draw(e) {
if (!drawing) return;

context.lineCap = «round»;

context.lineTo(
e.clientX — canvas.getBoundingClientRect().left,
e.clientY — canvas.getBoundingClientRect().top
);
context.stroke();
context.beginPath();
context.moveTo(
e.clientX — canvas.getBoundingClientRect().left,
e.clientY — canvas.getBoundingClientRect().top
);
}
const clearButton = document.getElementById(«clear-btn»);

clearButton.addEventListener(«click», () => {
context.clearRect(0, 0, canvas.width, canvas.height);
});
const colorPicker = document.getElementById(«color-picker»);

colorPicker.addEventListener(«input», (e) => {
context.strokeStyle = e.target.value;
});
const brushSizeInput = document.getElementById(«brush-size»);

brushSizeInput.addEventListener(«input», (e) => {
context.lineWidth = e.target.value;
});
body {
font-family: «Arial», sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

header {
background: linear-gradient(135deg, #57efbf, #64a8e4);
color: #fff;
text-align: center;
padding: 20px 0;
}

.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
border-radius: 10px;
padding: 10px;
}

canvas {
background-color: #f4f0eb;
background-size: cover;
border: 1px solid #919396;
box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
margin-top: 10px;
}

label {
font-weight: bold;
margin-right: 5px;
color: #fff;
}

input[type=»color»],
input[type=»range»] {
margin-right: 10px;
}

button {
padding: 10px 20px;
background-color: #4be2ed;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #dac765;
}

button:focus {
outline: none;
}

Post Views: 4