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 вы можете посмотреть, например, здесь.

Здесь вы можете закачать исходный код к заметкам.