Canvas
canvas - элемент html, мы будем рисовать на нём. Создайте папку canvas, перейдите в неё. Создайте в ней файл canvas.html.
<!doctype html>
<html>
<body>
<canvas width=300 height=300 id="canvas"></canvas>
<script src="./js/main.js" type="module"></script>
</body>
</html>
В папке создайте каталог js, в нем файл main.js.
fillRect(x, y, ширина, высота) рисует, закрашенный прямоугольник,
верхний левый угол прямоугольника имеет координаты x, y.
x - число пикселей вправо, y - число пикселей вниз от левого
верхнего угла канваса.
Запустите http-server, выполнив команду http-server. Результат приведён ниже.
Следующий пример создаёт текст на canvas
ctx.font = `20px Arial`//размер шрифта 20 пикселей, шрифт Arial
ctx.fillStyle = 'blue' //цвет текста голубой
ctx.textAlign = 'center'//выравнивание по горизонтали
ctx.textBaseline = 'middle'//выравнивание по вертикали
ctx.fillText('Hello, World', 50, 70) // положение текста 50 пикселйе вправо, 70 вниз
Ниже то, что мы получили
Нарисуем прямоугольный контур.
ctx.strokeStyle = 'yellow' //цвет контура жёлтый
ctx.lineWidth = 5//задаём толщину контура в 5 пикселей
ctx.strokeRect(10, 20, 50, 70)
Ниже то, что мы получили
Рисуем линии
ctx.strokeStyle = 'red'
ctx.lineWidth = 5
ctx.beginPath()//начало пути
ctx.moveTo(10, 10)//ставим карандаш в точку 10, 10 пикселей
ctx.lineTo(290, 10)//чертим прямую до точки 290 вправо и 10 вниз пикселей
ctx.lineTo(10, 290)//чертим прямую до точки 10 вправо и 290 вниз пикселей
ctx.stroke()//линия появляется на экране
Получаем.
Рассмотрим, как можно обработать нажатие на клавишу мышки.
canvas.addEventListener('click', drawRect);
function drawRect(event)
{
ctx.fillStyle = 'red';
ctx.fillRect(event.offsetX, event.offsetY, 5, 5);
}
Учебник по canvas вы можете посмотреть, например, здесь.
Здесь вы можете закачать исходный код к заметкам.