Доброго времени суток, друзья!

Данная статья представляет собой небольшую подборку примеров работы с Canvas API, к которой удобно обращаться при необходимости вспомнить изученный материал.

Это не руководство по работе с холстом, а лишь демонстрация его возможностей.

Для меня это также своего рода промежуточный итог в изучении холста.

Код разбит на отдельные блоки-песочницы, которые для удобства чтения помещены под «кат».

Парочка важных моментов.

Ширину и высоту холста лучше определять с помощью атрибутов:

<canvas width="300" height="300"></canvas>

Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Холст и двумерный контекст рисования я обычно определяю следующим образом:

const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')

Довольно слов.

С чего начинается конференция? Конечно, с бейджа! Это первое, что ты получаешь на входе, целый день (или несколько) вы с ним неразлучны, а потом он висит над твоим столом, напоминая окружающим о твоей космической крутизне и профессионализме.

Поэтому бейдж для международной конференции по практической безопасности OFFZONE мы стараемся сделать запоминающимся. Бейдж-карты OFFZONE 2018 были полноценными компьютерами на базе 8-битного процессора с JVM на борту. А на OFFZONE 2019 (17–18 июня) роль бейджа участника играла интерактивная печатная плата, выполненная, в согласии с общим стилем конференции, в виде дискеты 3,5 дюйма. Олды тут?!