javascript-canvas

Рисование с помощью Canvas API @2d

Usage no npm install needed!

<script type="module">
  import javascriptCanvas from 'https://cdn.skypack.dev/javascript-canvas';
</script>

README

Рисование для Canvas API [es6+] @2d

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

importmaps

<head>
  <script type="importmap">
  {
    "imports": {
      "javascript-algebra": "/javascript-algebra/index.js",
      "javascript-algebra/": "/javascript-algebra/library/",

      "javascript-canvas": "/javascript-canvas/index.js",
      "javascript-canvas/": "/javascript-canvas/library/"
    }
  }
  </script>
  <script src="./script.js" type="module"></script>
</head>
<body>
  <canvas></canvas>
</body>

./script.js

import {Canvas, Path} from 'javascript-canvas';
import {Vector}       from 'javascript-algebra';

const canvas = document.querySelector('canvas');

const context = new Canvas(canvas);
const size    = Vector.from(width, height); // размеры холста

const pointA = Vector.from(x, y); // координаты точек
const pointB = Vector.from(w, h);

context.port(size)
  .begin()
    .style({stroke: 'red', fill: 'lime'})
    .move(pointA)
    .rect(pointB)
    .fill()
    .stroke()
  .end();

Фича

аналогично SVG, различия между lowercase и UPPERCASE методами в относительном или абсолютном смещении при рисовании

пример: рисуем одну и ту же линию двумя способами

        // относительные значения
context // линия будет нарисована от (100,100) до (200,200)
  .begin()
    .move(Vector.from(100, 100)) // координаты начальной точки
    .line(Vector.from(100, 100)) // смещаемся на (100,100) от предыдущей точки
    .stroke()
  .end();

        // абсолютные значения
context // линия будет нарисована от (100,100) до (200,200)
  .begin()
    .MOVE(Vector.from(100, 100)) // координаты начальной точки
    .LINE(Vector.from(200, 200)) // координаты конечной точки
    .stroke()
  .end();

Алгебраические преобразования (2D)

можно для удобства преобразовывать контекст рисования и восстанавливать его обратно

пример: нарисуем квадрат, повернутый на 45 градусов и потом еще один внутри

const size   = Vector.from(50, 50);   // размеры квадрата
const center = Vector.from(100, 100); // центр квадрата будет в этой точке

context
  .begin()
    .save()                           // сохраняем СК (0 -> 1)
      .translate(center)              // перенос начала координат в точку (100, 100)
      .rotate(Math.PI / 4)            // поворот на 45 градусов
      .rectangleCenter(size)
        .save()                       // сохраняем СК (1 -> 2)
          .rotate(Math.PI / 4)        // поворот на 45 градусов
          .rectangleCenter(size)
        .restore()                    // восстанавливаем СК (2 -> 1)
      .restore();                     // восстанавливаем СК (1 -> 0)
    .stroke()                         // рисование
  .end()

Дополнительно

Если вы используете vscode, можно настроить резолв для корректной работы самого редактора с помощью файла jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "../node_modules/",
    "paths": {
      "javascript-canvas/*": ["./javascript-canvas/library/*"]
    }
  }
}