Canvas File Format

A simple file format for storing canvas commands to later be generated. Supports most of the canvas API.

Installation

npm install canvasff

Usage

import applyCFF from "canvasff";
applyCFF(ctx, file, scale = 1);

Applies the file to the ctx, scaled by a factor of scale (a scale of 2 produces a image twice as wide and twice as tall).

Node.JS use

This requires polyfilling Path2D and CanvasRenderingContext2D.

// Get polyfills
import { createCanvas, CanvasRenderingContext2D } from "canvas";
import { Path2D, applyPath2DToCanvasRenderingContext } from "path2d";
// Apply polyfills
globalThis.Path2D = Path2D as any;
applyPath2DToCanvasRenderingContext(CanvasRenderingContext2D as any);
// Create a canvas context
const canvas = createCanvas(1000, 1000);
const ctx = canvas.getContext("2d");
// NOTE: The "reset" command is not polyfilled.
applyCFF(ctx as any, ...);

File format

This is the spec for the file format. Each line is in the format of command arg1 arg2..., and commands are seperated by line. Comments are denoted with //, and work similar to JS. Angles default to degrees, but can be changed with use rad or use turns (use deg resets to degrees). The text PI appearing next to a number (e.g. 12PI) will be converted to 12 * Pi.

Basic Commands

See MDN for more details on how the canvas uses these commands, most of them directly translate to a CanvasRenderingContext2D method. | Command | Arguments | Description | | :--- | :--- | :--- | height | point | Sets the canvas height. | | width | point | Sets the canvas width. | | fill | - | Fills the current path. | | stroke | - | Strokes the current path. | | fill style | text | Sets the style used when filling shapes (color, gradient, or pattern). | | stroke style | text | Sets the style used for strokes. | | stroke width | point | Sets the line width. | | line cap | text | Sets the appearance of the ends of lines (butt, round, square). | | line join | text | Sets the appearance of line corners (round, bevel, miter). | | miter limit | point | Sets the limit for miter joins. | | dash | pointArray | Sets the line dash pattern. | | dash offset | point | Sets the phase of the line dash pattern. | | begin path | - | Starts a new path. | | close path | - | Closes the current path. | | save | - | Saves the current state of the canvas. | | restore | - | Restores the most recently saved canvas state. | | reset | - | Resets the canvas context to its default state. | | clear | - | Clears the entire canvas. | | clear rect | point, point, point, point | Clears a rectangular section of the canvas. | | rect | point, point, point, point | Adds a rectangle to the current path. | | round rect | point, point, point, point, point | Adds a rounded rectangle to the current path. | | stroke rect | point, point, point, point | Paints a rectangle which has a starting point at (x, y) and has a w and h. | | fill rect | point, point, point, point | Fills a rectangle. | | ellipse | point, point, point, point, angle, angle, angle, boolean | Adds an elliptical arc to the current path. | | arc | point, point, point, angle, angle, boolean | Adds a circular arc to the current path. | | circle | point, point, point | Adds a circle to the current path. | | curve | point, point, point, point, point, point | Adds a cubic Bézier curve to the current path. | | quadratic | point, point, point, point | Adds a quadratic Bézier curve to the current path. | | line to | point, point | Connects the last point to the specified point. | | move to | point, point | Moves the starting point of a new sub-path. | | arc to | point, point, point, point, point | Adds a circular arc to the current path, using control points and radius. |

Text Commands

| Command | Arguments | Description | | :--- | :--- | :--- | fill text | text, point, point, point | Fills a given text at the given (x,y) position. | | stroke text | text, point, point, point | Strokes a given text at the given (x,y) position. | | text align | text | Sets the alignment for text. | | text baseline | text | Sets the baseline alignment for text. | | text direction | text | Sets the directionality of the text. | | font | textArray | Sets the font properties. | | font kerning | text | Sets the font kerning. Doesn't work in Safari. | | font stretch | text | Sets the font stretch. Doesn't work in Safari. | | font caps | text | Sets the font variant caps. Doesn't work in Safari. |

Other Commands

| Command | Arguments | Description | | :--- | :--- | :--- | reset transformations | - | Resets the current transformation matrix to the identity matrix. | | rotate | angle | Rotates the canvas context. | | scale | point, point | Scales the canvas units by x and y. | | transform | point, point, point, point, point, point | Multiplies the current transformation matrix. | | fill linear | point, point, point, point, textArray | Sets a linear gradient for filling. Each item in the textArray is a color stop spaced evenly (2 items -> stops at 0% and 100%, 3 items -> stops at 0%, 50%, and 100%) | | stroke linear | point, point, point, point, textArray | Sets a linear gradient for stroking. Each item in the textArray is a color stop spaced evenly (2 items -> stops at 0% and 100%, 3 items -> stops at 0%, 50%, and 100%) | | fill radial | point, point, point, textArray | Sets a radial gradient for filling. Each item in the textArray is a color stop spaced evenly (2 items -> stops at 0% and 100%, 3 items -> stops at 0%, 50%, and 100%) | | stroke radial | point, point, point, textArray | Sets a radial gradient for stroking. Each item in the textArray is a color stop spaced evenly (2 items -> stops at 0% and 100%, 3 items -> stops at 0%, 50%, and 100%) | | fill conic | point, point, point, textArray | Sets a conic gradient for filling. Each item in the textArray is a color stop spaced evenly (2 items -> stops at 0% and 100%, 3 items -> stops at 0%, 50%, and 100%) | | stroke conic | point, point, point, textArray | Sets a conic gradient for stroking. Each item in the textArray is a color stop spaced evenly (2 items -> stops at 0% and 100%, 3 items -> stops at 0%, 50%, and 100%) | | shadow blur | point | Sets the amount of blur for shadows. | | shadow color | text | Sets the color of shadows. | | shadow offset | point, point | Sets the distance that shadows will be offset. | | alpha | number | Sets the global alpha value. | | composite | text | Sets the global composite operation. | | filter | textArray | Sets the filter effects (e.g. blur). Not supported in Safari. |

Path Mode

Path mode is a special mode that creates a Path2D. This is opened with fill path {, stroke path {, clip path {, and multi path { (to both fill and stroke), and is closed with }. It only supports the following commands: | Command | Arguments | Description | | :--- | :--- | :--- | move to | point, point | Moves the starting point of a new sub-path. | | line to | point, point | Connects the last point to the specified point. | | arc to | point, point, point, point, point | Adds a circular arc to the current path, using control points and radius. | | arc | point, point, point, angle, angle, boolean | Adds a circular arc to the current path. | | circle | point, point, point | Adds a circle to the current path. | | curve | point, point, point, point, point, point | Adds a cubic Bézier curve to the current path. | | quadratic | point, point, point, point | Adds a quadratic Bézier curve to the current path. | | rect | point, point, point, point | Adds a rectangle to the current path. | | round rect | point, point, point, point, point | Adds a rounded rectangle to the current path. | | close | - | Closes the current path. |

Groups

Groups can be used to structure commands together and will revert to the previous styles after the group is closed. Groups are opened with group { and closed with }. Groups can be nested but this does not work perfectly.

fromSVG

Takes a document of an svg or just the svg as a string and returns a canvas file. Does not work well, but can provide a basis at least.

Contributing

Contributions are welcome! Please submit a pull request. The tests can be ran with npm run test and build into the tests/output folder.

License

This is licensed under the MIT license.