Ctx 2D

Библиотека предоставляет функцию createCtx, позволяющую создать canvas с контекстом 2d внутри переданного блока. Разрешение будет автоматически подстраиваться под размер родительского блока в соответствии с заданными правилами.

Установка

Установите ctx-2d при помощи npm:

npm i ctx-2d

Подключение

import { createCtx } from 'ctx-2d';

Использование

Если требуется, чтобы canvas повторял геометрию родительского блока (например, body), создаём контекст следующим образом:

const ctx = createCtx(document.body)

Опции

Если контексту надо задать глобальные настройки (они сбрасываются при смене разрешения), в функцию createCtx следует передать вторым объект с ключом resizeCallback. Эта функция принимает контекст и будет вызвана каждый раз после изменения разрешения:

const options = {
  resizeCallback(ctx) {
    ctx.lineWidth = 9
    ctx.strokeStyle = '#099'
  },
}

const ctx = createCtx(document.body, options)

Полотну можно задать ограничение по высоте и ширине. Помимо ограничения, эта опция заставит canvas всегда иметь размер и разрешение в заданном соотношении сторон:

const options = {
  limits: {
    width: 1024,
    height: 768,
  },
}

const ctx = createCtx(document.body, options)