Skip to main content

Core Canvas (Low-Level)

Use ChamevoCanvas directly for fine-grained control over the canvas layer. This bypasses the ChamevoJS orchestrator — you manage products, views, and state yourself.

When to use: You're embedding the canvas into an existing application, need server-side rendering, building a custom editor, or only need the canvas primitives without product lifecycle management.

Installation​

npm install @chamevo/core fabric@^7.0.0

Basic Setup​

import { ChamevoCanvas } from '@chamevo/core';

const canvasEl = document.getElementById('canvas') as HTMLCanvasElement;

const canvas = new ChamevoCanvas(canvasEl, {
    width: 800,
    height: 600,
    backgroundColor: '#ffffff',
});

Adding Elements​

// Text
const text = await canvas.addElement('text', 'Hello World', 'greeting', {
    left: 400,
    top: 200,
    fontSize: 36,
    fontFamily: 'Arial',
    fill: '#333333',
    draggable: true,
    resizable: true,
    editable: true,
});

// Image
const image = await canvas.addElement('image', '/images/logo.png', 'logo', {
    left: 400,
    top: 400,
    scaleX: 0.5,
    scaleY: 0.5,
    draggable: true,
});

// Curved text
const curved = await canvas.addElement('curved-text', 'Curved!', 'arc-text', {
    left: 400,
    top: 300,
    curveRadius: 120,
    fontSize: 28,
    fill: '#0066cc',
});

// Textbox (multi-line, fixed width)
const textbox = await canvas.addElement('textbox', 'Multi-line text here', 'description', {
    left: 400,
    top: 350,
    width: 200,
    fontSize: 16,
    draggable: true,
    editable: true,
});

Modifying Elements​

// By title
canvas.setElementOptions('greeting', {
    fill: '#ff0000',
    fontSize: 48,
});

// By reference (FabricJS object)
text.set({ opacity: 0.5 });
canvas.renderAll();

Removing Elements​

// By title
canvas.removeElement('greeting');

// By reference
canvas.removeElement(text);

Finding Elements​

// By title
const el = canvas.getElementByTitle('greeting');

// By replace value
const replaceable = canvas.getElementByReplace('hero-image');

// All CV elements on canvas
const allElements = canvas.cvElements;
import { ChamevoCanvas } from '@chamevo/core';
import type { CVPrintAreaConfig } from '@chamevo/types';

const printAreaConfig: CVPrintAreaConfig = {
    printingBox: {
        left: 200,
        top: 100,
        width: 400,
        height: 500,
    },
    output: {
        width: 300,  // mm
        height: 400, // mm
    },
};

const printArea = await canvas.addPrintArea(printAreaConfig);

// Elements added after this are constrained to the print area
await canvas.addElement('text', 'Constrained text', 'pa-text', {
    left: 400,
    top: 300,
    draggable: true,
});

Custom FabricJS Objects​

ChamevoJS provides extended FabricJS v7 classes with ES6 class syntax:

import {
    CVText,
    CVIText,
    CVTextbox,
    CVCurvedText,
    CVNeonText,
    CVEngravedText,
    CVImage,
    CVSVGGroup,
    CVPrintArea,
} from '@chamevo/core';
ClassBaseDescription
CVTextTextStatic text with scale-to-fontSize conversion.
CVITextITextInteractive (editable) text with applyParameters().
CVTextboxTextboxMulti-line with auto-wrap.
CVCurvedTextITextText rendered on a circular arc.
CVNeonTextGroupText with neon glow effect.
CVEngravedTextITextText with engraved appearance (fixed opacity).
CVImageFabricImageImage with filters, scaleMode, and upload zone.
CVSVGGroupGroupMulti-path SVG with per-path color management via svgFill.
CVPrintAreaGroupPrint area with bleed, crop marks, mask, and zoom.

All classes use the CVElement mixin which adds permissions (draggable, resizable, etc.), bounding box clipping, and applyParameters().

Canvas Addons​

Extend the canvas with plugins via canvas.use():

import {
    snapGuides,
    multiSelection,
    highlightEditable,
    ruler,
} from '@chamevo/core';

// Smart alignment guides
canvas.use(snapGuides);

// Multi-select with Shift+click
canvas.use(multiSelection);

// Dashed border on editable objects
canvas.use(highlightEditable, { color: '#2185d0' });

// X/Y axis rulers
canvas.use(ruler, { unit: 'mm' });

History (Undo/Redo)​

// The canvas has a built-in HistoryManager
canvas.history.undo();
canvas.history.redo();

console.log(canvas.history.canUndo);
console.log(canvas.history.canRedo);

SVG Export​

// Export a print area to SVG
const svgString = await canvas.exportPrintAreaToSVG(printArea);

// Export all print areas
const svgStrings = await canvas.printAreasToSVG();

Element Factory​

Use ElementFactory to create elements programmatically without adding to canvas:

import { ElementFactory } from '@chamevo/core';

const element = await ElementFactory.create('text', 'Hello', {
    fontSize: 24,
    fill: '#000000',
});

// Add to canvas manually
canvas.add(element);
canvas.renderAll();

Configuration​

import { configure, getConfig } from '@chamevo/core';

// Set global defaults for all CV elements
configure({
    cornerControlsStyle: 'advanced',
    selectedColor: '#0066ff',
    boundingBoxColor: '#cccccc',
});

const config = getConfig();

Next Steps​