canvas-constructor

    5.0.1 • Public • Published

    CanvasConstructor Logo

    canvas-constructor

    An ES6 chainable class for node-canvas with built-in utilities.

    npm npm Total alerts GitHub license

    Support Server


    Installation

    This module requires one of the following packages to be installed for Node.js:

    Note: If you are building a website, no extra dependencies are required.


    How to use it:

    Node.js:

    const { Canvas } = require('canvas-constructor/skia');
    // or `canvas-constructor/cairo` if you are using `canvas`
    
    new Canvas(300, 300)
    	.setColor('#AEFD54')
    	.printRectangle(5, 5, 290, 290)
    	.setColor('#FFAE23')
    	.setTextFont('28px Impact')
    	.printText('Hello World!', 130, 150)
    	.toBuffer();

    Browser:

    <script type="text/javascript" src="https://unpkg.com/canvas-constructor"></script>
    <script type="text/javascript">
    	const canvasElement = document.getElementById('canvas');
    	new CanvasConstructor.Canvas(canvasElement)
    		.setColor('#AEFD54')
    		.printRectangle(5, 5, 290, 290)
    		.setColor('#FFAE23')
    		.setTextFont('28px Impact')
    		.printText('Hello World!', 130, 150);
    </script>
    • That will create a canvas with size of 300 pixels width, 300 pixels height.
    • Set the color to #AEFD54
    • Draw a rectangle with the previous color, covering all the pixels from (5, 5) to (290 + 5, 290 + 5)
    • Set the color to #FFAE23
    • Set the font size to 28 pixels with font Impact.
    • Write the text 'Hello World!' in the position (130, 150)
    • Return a buffer.

    Now, let's suppose we want to add images, we'll use Canvas.resolveImage, which works in both Node.js and browser:

    const { Canvas, resolveImage } = require('canvas-constructor/skia');
    
    async function createCanvas() {
    	const image = await resolveImage('./images/kitten.png');
    
    	return new Canvas(300, 400)
    		.printImage(image, 0, 0, 300, 400)
    		.setColor('#FFAE23')
    		.setTextFont('28px Impact')
    		.setTextAlign('center')
    		.printText('Kitten!', 150, 370)
    		.toBufferAsync();
    }
    • That will create a canvas with size of 300 pixels width, 400 pixels height.
    • Draw an image, given a Buffer (the image from the images folder).
    • Set the color to #FFAE23
    • Set the font size to 28 pixels with font Impact.
    • Set the text alignment to center.
    • Write the text 'Kitten!' in the position (150, 370)
    • Return a buffer.

    And now, you have created an image with a kitten in the background and some centred text in the bottom of it.

    If you experience issues with skia-canvas or canvas, please refer to their respective package repositories, this package is just a convenient wrapper for the two.

    Install

    npm i canvas-constructor

    DownloadsWeekly Downloads

    6,594

    Version

    5.0.1

    License

    MIT

    Unpacked Size

    548 kB

    Total Files

    42

    Last publish

    Collaborators

    • yorkaargh
    • kyranet
    • favna