7.0.1 • Published 25 days ago

canvas-constructor v7.0.1

Weekly downloads
16,608
License
MIT
Repository
github
Last release
25 days ago

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.

7.0.1

10 months ago

7.0.0

2 years ago

6.0.2

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

5.0.2

2 years ago

5.0.1

3 years ago

5.0.0

3 years ago

4.1.0

4 years ago

4.0.0

4 years ago

3.2.0

4 years ago

3.1.0

5 years ago

3.0.3

5 years ago

3.0.2

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.1.2

6 years ago

1.1.1

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.3.0

7 years ago

0.2.0

7 years ago

0.1.7

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago

0.0.1

7 years ago