<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Canvas demo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<h1>Мини-графика</h1>
<canvas id="board" width="320" height="180" aria-label="Демо canvas"></canvas>
<button type="button" id="draw">Нарисовать</button>
</main>
<script src="main.js"></script>
</body>
</html>
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<title>Canvas demo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<h1>Мини-графика</h1>
<canvas id="board" width="320" height="180" aria-label="Демо canvas"></canvas>
<button type="button" id="draw">Нарисовать</button>
</main>
<script src="main.js"></script>
</body>
</html>
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const button = document.getElementById('draw');
button.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#6ea1ff';
ctx.fillRect(24, 24, 120, 64);
ctx.fillStyle = '#9aa6ba';
ctx.font = '14px Segoe UI, sans-serif';
ctx.fillText('IT Code Examples', 24, 120);
});
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const button = document.getElementById('draw');
button.addEventListener('click', () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#6ea1ff';
ctx.fillRect(24, 24, 120, 64);
ctx.fillStyle = '#9aa6ba';
ctx.font = '14px Segoe UI, sans-serif';
ctx.fillText('IT Code Examples', 24, 120);
});
body {
font-family: system-ui, sans-serif;
margin: 2rem;
background: #0f141c;
color: #e8edf5;
}
canvas {
display: block;
border: 1px solid #2a3444;
border-radius: 8px;
background: #111822;
}
button {
margin-top: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 8px;
border: 0;
background: #2f6feb;
color: #fff;
cursor: pointer;
}
body {
font-family: system-ui, sans-serif;
margin: 2rem;
background: #0f141c;
color: #e8edf5;
}
canvas {
display: block;
border: 1px solid #2a3444;
border-radius: 8px;
background: #111822;
}
button {
margin-top: 0.75rem;
padding: 0.5rem 1rem;
border-radius: 8px;
border: 0;
background: #2f6feb;
color: #fff;
cursor: pointer;
}
