Home

Documentation for canvasom

Canvas Object Model.

Introduction

canvasom is a front-end library that provides DOM-like APIs to create canvas object models:

const renderer = new COM.Renderer({
    canvas: document.getElementById('canvas'),
    width: window.innerWidth,
    height: window.innerHeight,
});

const root = new COM.CanvasRoot({ renderer });

root.appendChild(
    COM.create(COM.TextNode, {
        stretchX: 1,
        stretchY: 1,
        content: 'hello world',
        style: {
            fillStyle: '#000',
            textAlign: 'center',
            textBaseline: 'middle',
        },
    }),
);

root.updateAndRender();

API Reference

Read the API reference here.

Usage

Via NPM

To use canvasom as a dependency, install it by executing:

npm install canvasom

and import the APIs like this:

import { CanvasRoot } from "canvasom";

const root = new CanvasRoot();

Via CDN

Alternatively, load it via CDN:

<!-- via jsdelivr -->
<script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/canvasom@<version here>/dist/canvasom.umd.min.js"></script>
<!-- via unpkg -->
<script type="text/javascript" crossorigin="anonymous" src="https://unpkg.com/canvasom@<version here>/dist/canvasom.umd.min.js"></script>

and access the APIs via the global namespace COM:

const root = new COM.CanvasRoot();