You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Now, let's suppose we want to add images. I'd recommend [fs-nextra](https://github.com/bdistin/fs-nextra), by BDISTIN, it requires Node.js 8.5.0 to work (it promisifies the async fs methods with `Util.promisify()`), it's a dependency-free and lightweight package that provides support for **atomic operations**.
49
+
Now, let's suppose we want to add images. I'd recommend [fs-nextra](https://github.com/bdistin/fs-nextra), by BDISTIN,
50
+
it requires Node.js LTS to work, it is a dependency-free and lightweight package that provides support for
51
+
**atomic operations**.
49
52
50
53
```js
51
54
const { Canvas } =require('canvas-constructor');
@@ -76,4 +79,7 @@ async function createCanvas() {
76
79
77
80
And now, you have created an image with a kitten in the background and some centered text in the bottom of it.
78
81
79
-
If you experience issues with **Canvas** or want to install it, please refer to the [canvas](https://www.npmjs.com/package/canvas) repository, if you feel you found an issue in this package, feel free to file an issue [here](https://github.com/kyranet/canvasConstructor/issues), or make a [Pull Request](https://help.github.com/articles/about-pull-requests/) if you have the fix.
82
+
If you experience issues with **Canvas** or want to install it, please refer to the
83
+
[canvas](https://www.npmjs.com/package/canvas) repository, if you feel you found an issue in this package, feel free to
84
+
file an issue [here](https://github.com/kyranet/canvasConstructor/issues), or make a
85
+
[Pull Request](https://help.github.com/articles/about-pull-requests/) if you have the fix.
Let's start off by introducing what canvas is. In HTML, the `<canvas>` element can be used to draw images via scripting with JavaScript. The canvas that we're talking about is a Cairo backed canvas implementation for **Node.js**. An example of something that can be done with canvas is this.
3
+
> **NOTE**: This guide is for installing `canvas` for node.js, if you want to use `canvas-constructor` for web browsers,
4
+
use the package link from unpkg or get the bundle from the
Here, the bot is using canvas to edit a template and insert your avatar, and a random users avatar onto the template. So that's just an example of what Canvas can do, let's get down to installing it.
13
+
Here, the bot is using canvas to edit a template and insert your avatar, and a random users avatar onto the template. So
14
+
that's just an example of what Canvas can do, let's get down to installing it.
8
15
9
16
## Installation Steps
10
17
@@ -22,39 +29,54 @@ Based on what OS you're on, there are different steps to install the required pr
22
29
23
30
### Step 1
24
31
25
-
First, you need to run `npm install --global --production windows-build-tools` from a PowerShell or command prompt run as an administrator. This will take a little while, so be prepared to do other stuff while it installs.
32
+
You need to install [`windows-build-tools`](https://github.com/felixrieseberg/windows-build-tools) globally from
33
+
PowerShell or cmd.exe run as an administrator, this will take a little while, as it will install C++ build tools
34
+
necessary to be able to compile native modules like canvas.
35
+
36
+
```bash
37
+
# Using npm
38
+
$ npm install --global windows-build-tools
39
+
40
+
# Using yarn
41
+
$ yarn global add windows-build-tools
42
+
```
26
43
27
44
**>Notes:**
28
45
29
-
- While the npm page tells you to install GTK and libjpeg-turbo, those aren't needed! Both canvas and canvas-constructor function perfectly fine without them, so they're really just taking up space that could be used for something else.
46
+
- While the npm page tells you to install `GTK` and `libjpeg-turbo`, those aren't needed! Both `canvas` and
47
+
`canvas-constructor` function perfectly fine without them, so they're really just taking up space that could be used for
48
+
something else.
30
49
31
50
### Step 2
32
51
33
-
The next and final step is simple.
34
-
35
-
You can either do...
52
+
The next and final step is simple, install canvas and canvas-constructor
36
53
37
54
```bash
38
55
# Using npm
39
-
$ npm i canvas
56
+
$ npm i canvas canvas-constructor
40
57
41
58
# Using yarn
42
-
$ yarn add canvas
59
+
$ yarn add canvas canvas-constructor
43
60
```
44
61
45
-
> **Note**: You can install a development version of canvas by replacing `canvas` with `Automattic/node-canvas`,
46
-
however, we do not guarantee it will work with latest `canvas-constructor`.
62
+
> **Note**: You can install a development version of `canvas` by replacing `canvas` with `Automattic/node-canvas`,
63
+
or `canvas-constructor` with `kyranet/canvasConstructor` for that matter. However, we do not guarantee stability in
64
+
development branches.
47
65
48
-
Next, to install canvas-constructor, you just need to do
66
+
If you followed the guide completely, your console should look something like this, and you're good to go!
0 commit comments