Canvas-constructor NPM | npm.io

7.0.2 • Published 7 days ago

Install

Weekly downloads

16,608

License

MIT

Repository

Last release

7 days ago

CanvasConstructor Logo

canvas-constructor

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

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.

canvas graphic graphics image images avif jpeg jpg pdf png svg webp node-canvas skia-canvas napi-rs constructor chainable browser nodejs node.js cjs commonjs esm umd skia

7.0.3-next.cce1551.0

7 days ago

7.0.3-next.f6c9ae6.0

2 months ago

7.0.3-next.d0e82eb.0

2 months ago

7.0.3-next.32dac51.0

2 months ago

7.0.3-next.d55cd12.0

2 months ago

7.0.3-next.7f30be5.0

2 months ago

7.0.3-next.8b361f5.0

3 months ago

7.0.3-next.b1b9929.0

3 months ago

7.0.3-next.d043ea7.0

3 months ago

7.0.3-next.a7d196f.0

4 months ago

7.0.3-next.5475c5f.0

3 months ago

7.0.3-next.2052af7.0

4 months ago

7.0.3-next.5016259.0

4 months ago

7.0.3-next.886315f.0

5 months ago

7.0.3-next.5ff7e0b.0

4 months ago

7.0.3-next.008567c.0

5 months ago

7.0.3-next.82afe38.0

5 months ago

7.0.3-next.6efd401.0

5 months ago

7.0.3-next.5c75751.0

5 months ago

7.0.3-next.17462b1.0

6 months ago

7.0.3-next.795a08c.0

6 months ago

7.0.3-next.cb36830.0

6 months ago

7.0.3-next.80ae27f.0

7 months ago

7.0.3-next.fae0ad3.0

7 months ago

7.0.3-next.c646f28.0

7 months ago

7.0.3-next.6ed8f3e.0

6 months ago

7.0.3-next.7c64b28.0

7 months ago

7.0.3-next.9de31c2.0

8 months ago

7.0.3-next.915a86a.0

8 months ago

7.0.2-next.c174a5f.0

8 months ago

7.0.2-next.34129f4.0

8 months ago

7.0.3-next.c8ab436.0

8 months ago

8 months ago

7.0.3-next.55b32f4.0

8 months ago

7.0.2-next.7976395.0

11 months ago

7.0.2-next.8b3d7a9.0

11 months ago

7.0.2-next.3a28c66.0

11 months ago

7.0.2-next.789f08f.0

11 months ago

7.0.2-next.cc644b3.0

11 months ago

7.0.2-next.b44fc21.0

11 months ago

7.0.2-next.b01e213.0

11 months ago

7.0.2-next.8fe56fe.0

11 months ago

7.0.2-next.5117a42.0

12 months ago

7.0.2-next.317849b.0

12 months ago

7.0.2-next.f7802e0.0

12 months ago

7.0.2-next.afb85ee.0

12 months ago

7.0.2-next.7c5b80a.0

1 year ago

7.0.2-next.76e9a57.0

1 year ago

7.0.2-next.86af0a4.0

1 year ago

7.0.2-next.c28f70c.0

1 year ago

7.0.2-next.3463a6a.0

1 year ago

7.0.2-next.9f8f19c.0

1 year ago

7.0.2-next.2c3005c.0

1 year ago

7.0.2-next.3b28318.0

1 year ago

7.0.2-next.c8ba7e5.0

1 year ago

7.0.2-next.b04c3dd.0

1 year ago

7.0.2-next.275be4a.0

1 year ago

7.0.2-next.7172e25.0

1 year ago

7.0.2-next.2a4d4e5.0

1 year ago

7.0.2-next.95a3289.0

1 year ago

7.0.2-next.dc27f75.0

1 year ago

7.0.2-next.1d179c8.0

1 year ago

7.0.2-next.1835e58.0

1 year ago

7.0.2-next.12c1969.0

1 year ago

7.0.2-next.d3617b1.0

1 year ago

7.0.2-next.b5a4566.0

1 year ago

7.0.2-next.9894e58.0

1 year ago

7.0.2-next.a09bef7.0

1 year ago

7.0.2-next.316ac69.0

1 year ago

7.0.2-next.eb82062.0

1 year ago

7.0.2-next.8d2f27a.0

2 years ago

7.0.2-next.e588c23.0

1 year ago

7.0.2-next.153643b.0

1 year ago

7.0.2-next.729500a.0

1 year ago

7.0.2-next.01f82cb.0

1 year ago

7.0.2-next.5834a4b.0

2 years ago

7.0.2-next.1e37532.0

1 year ago

7.0.2-next.9892e69.0

1 year ago

7.0.2-next.99d7fab.0

2 years ago

7.0.2-next.3fca408.0

1 year ago

7.0.2-next.20f051e.0

1 year ago

7.0.2-next.a89d1b4.0

1 year ago

7.0.2-next.799ad47.0

1 year ago

7.0.2-next.398ce43.0

1 year ago

7.0.2-next.c6e6e6c.0

1 year ago

7.0.2-next.b96efda.0

1 year ago

7.0.2-next.f80e3e9.0

1 year ago

7.0.2-next.e15e6a9.0

1 year ago

7.0.2-next.f83723a.0

1 year ago

7.0.2-next.12b04f5.0

1 year ago

7.0.2-next.9ab7243.0

1 year ago

7.0.2-next.599dd7f.0

1 year ago

7.0.2-next.60ab613.0

2 years ago

7.0.2-next.fe77263.0

1 year ago

7.0.2-next.f30c277.0

1 year ago

7.0.2-next.16697a6.0

1 year ago

7.0.2-next.a9274ea.0

1 year ago

7.0.2-next.4540143.0

1 year ago

7.0.2-next.6f2d4d7.0

1 year ago

7.0.2-next.7c4cad2.0

1 year ago

7.0.2-next.a1b7d06.0

2 years ago

7.0.2-next.c5455d7.0

2 years ago

7.0.2-next.53908de.0

2 years ago

7.0.1-next.a83af48.0

2 years ago

7.0.2-next.4cb46f3.0

2 years ago

7.0.1-next.d436832.0

2 years ago

7.0.2-next.b047ec0.0

2 years ago

7.0.1-next.0ad6c4c.0

2 years ago

2 years ago

7.0.2-next.267139e.0

2 years ago

7.0.2-next.fb11b28.0

2 years ago

7.0.1-next.732d1f9.0

2 years ago

7.0.1-next.0a2ca4c.0

2 years ago

7.0.1-next.db77050.0

2 years ago

7.0.1-next.e6a7b47.0

2 years ago

7.0.1-next.f043125.0

2 years ago

7.0.1-next.cdea51d.0

2 years ago

7.0.1-next.186f17d.0

2 years ago

7.0.1-next.2e3b0f5.0

2 years ago

7.0.1-next.28a96b1.0

2 years ago

7.0.1-next.a2fef0a.0

2 years ago

7.0.1-next.9ca5a82.0

2 years ago

7.0.1-next.ce66f43.0

2 years ago

7.0.1-next.b8d173e.0

2 years ago

7.0.1-next.02e5ea6.0

2 years ago

7.0.1-next.dffd96d.0

2 years ago

7.0.1-next.c0ddf6b.0

2 years ago

7.0.1-next.821c19e.0

2 years ago

7.0.1-next.a431c4d.0

2 years ago

7.0.1-next.216a7d9.0

2 years ago

7.0.1-next.70cb60b.0

2 years ago

7.0.1-next.e666e3b.0

2 years ago

7.0.1-next.6839696.0

2 years ago

7.0.1-next.eb11f76.0

2 years ago

7.0.1-next.fdffec5.0

2 years ago

7.0.1-next.57056fc.0

2 years ago

7.0.1-next.343a285.0

2 years ago

7.0.1-next.03df8a7.0

2 years ago

7.0.1-next.3aefc02.0

2 years ago

7.0.1-next.e25cd50.0

2 years ago

7.0.1-next.d6e6fc0.0

2 years ago

7.0.1-next.7d3a098.0

2 years ago

7.0.1-next.2230f87.0

2 years ago

7.0.1-next.4632fc5.0

2 years ago

7.0.1-next.fff96ba.0

2 years ago

7.0.1-next.288f67e.0

2 years ago

7.0.1-next.89ee904.0

2 years ago

7.0.1-next.34a75da.0

2 years ago

7.0.1-next.de00745.0

2 years ago

7.0.1-next.505658d.0

2 years ago

7.0.1-next.22ef432.0

2 years ago

7.0.1-next.02c7910.0

2 years ago

7.0.1-next.1f52571.0

2 years ago

6.0.2-next.01e2e89.0

3 years ago

6.0.3-next.fd1a316.0

3 years ago

6.0.3-next.efad17e.0

2 years ago

6.0.2-next.233d73f.0

3 years ago

6.0.3-next.85ea646.0

3 years ago

6.0.2-next.74d3e81.0

3 years ago

7.0.0-next.a68fb0a.0

2 years ago

6.0.2-next.1e47ad6.0

3 years ago

2 years ago

6.0.2-next.12e19e9.0

3 years ago

6.0.2-next.b4122db.0

3 years ago

6.0.3-next.df13ad3.0

2 years ago

7.0.0-next.fcac109.0

2 years ago

6.0.2-next.25ae647.0

3 years ago

6.0.3-next.755c19e.0

3 years ago

6.0.3-next.c366d69.0

3 years ago

7.0.0-next.c5ad068.0

2 years ago

6.0.3-next.63d4966.0

2 years ago

6.0.3-next.5c66d71.0

2 years ago

6.0.2-next.8c39f98.0

3 years ago

7.0.1-next.4350cd9.0

2 years ago

6.0.2-next.1f93154.0

3 years ago

6.0.3-next.a6d84cd.0

2 years ago

7.0.1-next.d612bb1.0

2 years ago

6.0.3-next.fdd7b9b.0

2 years ago

6.0.3-next.63aa679.0

2 years ago

6.0.3-next.099481e.0

2 years ago

6.0.3-next.5ecbb02.0

2 years ago

6.0.3-next.a888c5d.0

2 years ago

3 years ago

6.0.3-next.8afa85d.0

2 years ago

6.0.3-next.f50fd93.0

2 years ago

6.0.2-next.95aa771.0

3 years ago

6.0.3-next.3fc1433.0

3 years ago

5.0.3-next.b1de077.0

3 years ago

5.0.3-next.8252846.0

3 years ago

5.0.3-next.691aed4.0

3 years ago

5.0.3-next.544b222.0

3 years ago

6.0.1-next.bf5fc94.0

3 years ago

6.0.0-next.a082135.0

3 years ago

6.0.1-next.d27a04a.0

3 years ago

5.0.3-next.a6b61dc.0

3 years ago

6.0.0-next.3e56854.0

3 years ago

6.0.2-next.9f62815.0

3 years ago

5.0.3-next.8015918.0

3 years ago

6.0.1-next.352a24e.0

3 years ago

5.0.3-next.a77b405.0

3 years ago

6.0.2-next.4572379.0

3 years ago

5.0.3-next.40aa0d8.0

3 years ago

6.0.1-next.6d1c5da.0

3 years ago

3 years ago

6.0.0-next.8982bc7.0

3 years ago

3 years ago

5.0.3-next.0c9731b.0

3 years ago

6.0.1-next.041676c.0

3 years ago

6.0.1-next.d9be3ce.0

3 years ago

6.0.2-next.ca93870.0

3 years ago

6.0.2-next.8e7b729.0

3 years ago

6.0.2-next.5c462eb.0

3 years ago

6.0.0-next.644ab62.0

3 years ago

5.0.3-next.4ae294d.0

3 years ago

5.0.3-next.ceb1c21.0

3 years ago

5.0.3-next.045ed09.0

3 years ago

5.0.3-next.ede87e8.0

3 years ago

5.0.3-next.e8dedcc.0

3 years ago

5.0.3-next.57e58d0.0

3 years ago

5.0.3-next.5057205.0

3 years ago

5.0.3-next.4480c8f.0

3 years ago

5.0.3-next.e5d9763.0

3 years ago

5.0.3-next.fe8f692.0

3 years ago

5.0.3-next.c7839e3.0

3 years ago

5.0.3-next.9844292.0

3 years ago

5.0.3-next.47e7451.0

3 years ago

5.0.3-next.ef2fa03.0

3 years ago

5.0.3-next.1088c55.0

3 years ago

5.0.3-next.c7f37a1.0

3 years ago

5.0.3-next.99ba84a.0

3 years ago

5.0.3-next.fe8ca9d.0

3 years ago

5.0.3-next.300b451.0

3 years ago

5.0.3-next.b28cfa9.0

3 years ago

5.0.3-next.153bdd6.0

3 years ago

5.0.3-next.6158de4.0

3 years ago

5.0.3-next.2585ae9.0

3 years ago

5.0.3-next.267697f.0

3 years ago

5.0.2-next.481ba6f.0

3 years ago

5.0.2-next.d65132f.0

3 years ago

5.0.3-next.1514ff2.0

3 years ago

5.0.2-next.190f87e.0

3 years ago

5.0.2-next.591489b.0

3 years ago

5.0.2-next.8db64f4.0

3 years ago

3 years ago

5.0.2-next.174540d.0

3 years ago

5.0.2-next.f29378f.0

3 years ago

5.0.2-next.a4c30c1.0

3 years ago

5.0.2-next.b136ab1.0

3 years ago

5.0.2-next.7421b39.0

3 years ago

5.0.3-next.5f5a3a3.0

3 years ago

5.0.2-next.dc6f1c0.0

3 years ago

5.0.2-next.f0e5c59.0

3 years ago

5.0.2-next.01b0c78.0

3 years ago

5.0.3-next.bf62320.0

3 years ago

5.0.2-next.7c2a3a4.0

3 years ago

5.0.2-next.24196e2.0

3 years ago

5.0.2-next.77192d4.0

3 years ago

5.0.2-next.8a887ee.0

3 years ago

5.0.2-next.d5131ed.0

3 years ago

5.0.2-next.137b249.0

3 years ago

5.0.2-next.1cd804f.0

3 years ago

5.0.2-next.95e6d21.0

3 years ago

5.0.2-next.f92d477.0

3 years ago

5.0.2-next.c79e796.0

3 years ago

5.0.2-next.038a83a.0

3 years ago

5.0.2-next.9cbe91e.0

3 years ago

5.0.2-next.e91c05a.0

3 years ago

5.0.2-next.5b9eccc.0

3 years ago

5.0.2-next.024a21c.0

3 years ago

5.0.2-next.9e43ae2.0

3 years ago

5.0.2-next.2598c2d.0

3 years ago

5.0.2-next.6f7f15b.0

3 years ago

5.0.2-next.963f58c.0

3 years ago

5.0.2-next.7cf4aad.0

3 years ago

5.0.2-next.ab64969.0

3 years ago

5.0.2-next.e0ee68c.0

3 years ago

5.0.2-next.d198e03.0

3 years ago

5.0.2-next.ac29a06.0

3 years ago

5.0.2-next.fb00779.0

3 years ago

5.0.2-next.a85a051.0

3 years ago

5.0.2-next.553cb0e.0

3 years ago

5.0.2-next.eea798b.0

3 years ago

5.0.2-next.f728b98.0

3 years ago

5.0.2-next.113f8ce.0

3 years ago

5.0.2-next.f26895e.0

3 years ago

5.0.2-next.e32d5a9.0

3 years ago

5.0.2-next.3419ceb.0

3 years ago

5.0.2-next.3bcf29e.0

3 years ago

5.0.2-next.1ca601c.0

3 years ago

5.0.2-next.20b952c.0

3 years ago

5.0.2-next.45f8920.0

3 years ago

5.0.2-next.ba93b7e.0

3 years ago

5.0.2-next.3fe16ad.0

3 years ago

5.0.2-next.08c3418.0

3 years ago

5.0.2-next.d3af68d.0

3 years ago

5.0.2-next.7f0d3c1.0

3 years ago

5.0.2-next.65dbb55.0

3 years ago

5.0.2-next.d3fe85c.0

3 years ago

5.0.2-next.37bc0f8.0

3 years ago

3 years ago

5.0.1-next.3414108.0

3 years ago

5.0.1-next.be298b2.0

3 years ago

5.0.2-next.de1fe70.0

3 years ago

3 years ago

5.0.0-next.3a2aece.0

3 years ago

4.1.1-next.f80dc98.0

3 years ago

4 years ago

4 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago