GCanvas/node/README.MD

Node-GCanvas

Node-GCanvas is GCanvas(OpenGLES) or Cairo backed Canvas implementation for Node.js. It provide a way use Canvas in Node.js environment. So you can use canvas-like object to do your own render task at server side just like on Web. Now, we just support Linux and MacOS.

Installation

npm install @gcanvas/node

Note: Node.js version >=10.0。

Compiling

Since GCanvas relies on OpenGL for graphics rendering, CairoCanvas depedency cairo library, you need to install the dependency libraries needed for operation on the corresponding system. Meanwhile, the @gcanvas/node is built with CMake, so the system needs to install the CMake version >=3.8.0. The dependency libraries required to run on each operating system are listed below.

OS	Command
OS X	sudo brew install jpeg-turbo cairo pango pangocairo
Ubuntu 18.04	sudo apt-get update && apt-get install -y libglfw3-dev libgles2-mesa-dev libboost-all-dev libfreetype6-dev libcurl4-openssl-dev libjpeg-dev libcairo2-dev libpangocairo-1.0-0 libpango-1.0 libglib2.0-dev && install freetype字体库 && install cmake
Docker	Dockerfile

Quick Start Example

After run npm install @gcanvas/node, install npm package success, You can quick start an example like this.

const { createCanvas, Image } = require('@gcanvas/node');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d')

ctx.fillRect(0, 0, 150, 150) // Draw a rectangle with default settings
ctx.save() // Save the default state

ctx.fillStyle = '#09F' // Make changes to the settings
ctx.fillRect(15, 15, 120, 120) // Draw a rectangle with new settings

ctx.save() // Save the current state
ctx.fillStyle = '#FFF' // Make changes to the settings
ctx.globalAlpha = 0.5
ctx.fillRect(30, 30, 90, 90) // Draw a rectangle with new settings

ctx.restore() // Restore previous state
ctx.fillRect(45, 45, 60, 60) // Draw a rectangle with restored settings

ctx.restore() // Restore original state
ctx.fillRect(60, 60, 30, 30) // Draw a rectangle with restored settings

const fs = require('fs')
const path = require('path');
const out = fs.createWriteStream(path.join(__dirname, "")+ '/test-output.png');
const stream = canvas.createPNGStream();
stream.pipe(out);

Save the example as a test.js file, then execute in your terminal node test.js, you will get an output put file named test-output.png.

API Documentation

Standard APIs

• GCanvas benchmarking Web Canvas API implementation, as close as possible to the Web Canvas API. The API documentation, please visit the [Mozilla Web Canvas API] (https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D). (see this link for current API compatibility)
• Standard API Supported
  • function
    • getContext()
    • fillRect()
    • arc()
    • arcTo()
    • beginPath()
    • bezierCurveTo()
    • quadraticCurveTo()
    • clearRect()
    • clip()
    • closePath()
    • createImageData()
    • createLinearGradient()
    • createPattern()
    • createRadialGradient()
    • drawImage()
    • ellipse:not support
    • fill()
    • fillText()
    • getImageData()
    • getLineDash()
    • lineTo()
    • measureText()
    • moveTo()
    • putImageData()
    • rect()
    • resetTransform()
    • restore()
    • rotate()
    • save()
    • scale()
    • setLineDash()
    • setTransform()
    • stroke()
    • strokeRect()
    • strokeText()
    • transform()
    • translate()
  • propetry
    • width
    • height
    • fillStyle
    • font
    • globalAlpha
    • globalCompositeOperation
    • lineCap
    • lineDashOffset
    • lineJoin
    • lineWidth
    • miterLimit
    • shadowBlur
    • shadowColor
    • shadowOffsetX
    • shadowOffsetY
    • strokeStyle
    • textAlign
    • textBaseline

Non-Standard APIs

createCanvas

createCanvas(width: number, height: number) => Canvas

let canvas = createCanvas(400, 400);

Image

img.src: string
img.onload:Function
img.onerror:Function 

const img = new Image()
img.onload = () => {
	ctx.drawImage(img, 0, 0);
	canvas.createPNG("demo2");
}
img.onerror = err => {
	console.log(err)
}
img.src = 'https://alibaba.github.io/GCanvas/assets/logo-gcanvas.png'

const fs = require('fs')
const path = require('path')
const { createCanvas, Image } = require('@gcanvas/node');
const img = new Image()
const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')
	
img.onload = () => {
	ctx.drawImage(img, 0, 0)
	const out = fs.createWriteStream(path.join(__dirname, "")+ '/localimage.png');
	const stream = canvas.createPNGStream();
	stream.pipe(out);
}
img.onerror = err => {
	throw err
}
	
img.src = path.join(__dirname,'images', 'image.png')
 

createPNGStream

createPNGStream() => void

const { createCanvas, Image } = require('@gcanvas/node');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d');
ctx.fillStyle="#ff0000"
ctx.fillRect(0, 0, 150, 150) 
canvas.createPNG("demo1") //export a png picture

const out = fs.createWriteStream(path.join(__dirname, "")+ '/localimage.png');
const stream = canvas.createPNGStream();
stream.pipe(out);

createJPEGStream

createJPEGStream() => void

const { createCanvas, Image } = require('@gcanvas/node');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d')
ctx.fillStyle = '#09F' 
ctx.fillRect(0, 0, 150, 150) // Draw a rectangle with default settings
const out = fs.createWriteStream(path.join(__dirname, "")+ '/output-jpeg.jpg')
const stream = canvas.createJPEGStream(); // export a jpeg picture
stream.pipe(out);

toBuffer

toBuffer(string?) => ArrayBuffer 

const { createCanvas, Image } = require('@gcanvas/node');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d')
const fs = require('fs')
const path = require('path');
ctx.fillStyle="#ff0000"
ctx.fillRect(0, 0, 150, 150) //

fs.writeFile(`${path.join(__dirname, "..")}/tobuffer.png`, canvas.toBuffer("image/png"), err => {
    if (err) {
        throw err;
    }
});

fs.writeFile(`${path.join(__dirname, "..")}/tobuffer.jpg`, canvas.toBuffer("image/jpeg"), err => {
    if (err) {
        throw err;
    }
});

var buffer=canvas.toBuffer("raw")
console.log(buffer)

toDataURL

toDataURL(string?) => ArrayBuffer 

const { createCanvas, Image } = require('@gcanvas/node');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d')
ctx.fillStyle="#ff0000";
ctx.fillRect(0, 0, 150, 150);
var base64 = canvas.toDataURL();
console.log(base64)

Node-GCanvas Source Code Build & Test Running

If you want to build and develop based on source code, this document will show you how to build and run and test based on source code.

Node-canvas USES node-addon's binding API and builds with cmake-js.

Step of build

npm install cmake-js -g			//install cmake-js
npm install 					// install dependency
npm run dev 					//build project

Step of running

case=app.js npm run test //run *.js of example folder，output the runing result like png picture
case=app.js npm run test-headless// if you don't have system display,you can use this command

Examples

Examples line in the examples/ directory. Most produce a png image of the same name.