<!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;
}