@noxfly/canvas

node.js Canvas

About

This package is for 2D canvas, on backend, meaning it cannot be animated.
It is here to simplify the use of the node-canvas package, giving additionnal resources, like mathematical functions, perlin noise, vector, matrix, colors quadtree and image cache manager.

Basic usage

https://www.npmjs.com/package/@noxfly/canvas

CommonJS

const Canvas = require('@noxfly/canvas');

const canvas = Canvas.createCanvas(640, 480);

// ...

Module

import * as Canvas from '@noxfly/canvas';

const canvas = Canvas.createCanvas(640, 480);

Canvas creation

const { createCanvas } = require('@noxfly/canvas');

// createCanvas(width, height, background=null, support=null)
const canvas = createCanvas(640, 480, '#000');
// support can be null, SVG or PDF (read the node-canvas documentation)

// no context given will by default create a 2d one
// no background given will result of an empty one

console.log(canvas.width, canvas.height); // 640, 480

// get its context
console.log(canvas.ctx);

// "real" canvas object :
console.log(canvas._);

Append node canvas to html

<!-- Example with EJS file -->
<img src="<%= canvas.toDataURL() %>">

Append node canvas as buffer

const buffer = canvas.toBuffer();

Canvas methods

Shapes

You can find their documentation to know their parameters here.

Instead of the front version where you have to do line(x1, y1, x2, y2),

you have to do canvas.line(x1, y1, x2, y2).

canvas.line(0, 0, 640, 480);
// same for all other shapes

Shape personalization

Same as before, it's as their documention describes you their usage, but adding a canvas. before.

canvas.fill(255);
// same for other functions

push, pop, translate, rotate, scale and clip

Exactly the same thing, adding canvas. before.

canvas.push();
    canvas.translate(x, y);
    canvas.rotate(degrees);
    canvas.scale(1.2);
    // ...
    canvas.clip(); // ctx.clipPath()
canvas.pop();

Colors

If you read the default README, you know this framework has some useful functions as color managment and convertions, for RGB, HEX and HSL.

You can find their usage here.

const { RGB, HEX, HSL } = require('@noxfly/canvas');

Vectors

Same as the color section, you can read how to use vectors here.

const { Vector } = require('@noxfly/canvas');

Matrix

Read the usage of this class here.

Mathematical and statistical functions

Same as the color section, you can read their usage here.

const { radian, degree, random, ... } = require('@noxfly/canvas');

Path class

Read the usage of this class here.

const { Path } = require('@noxfly/canvas');

Create image cache system

If you load an image for the first time, it will load it, then store it, else it will just returns you the saved image of the first call.

const { createCanvas, createImageManager } = require('@noxfly/canvas');

const canvas = createCanvas(640, 480);

const imageManager = createImageManager();

const img = await imageManager.load('myImageName', 'my/path/to/image.png');

canvas.drawImage(img);

// you can call again the imageManager.load('myImageName', 'my/path/to/image.png')
// and it will returns you the stored image

Quadtree

Read the usage of this class here.

Perlin Noise

Read the usage of this class here.

License

This repo has the GPL-3.0 license. See the LICENSE.txt.