node-skia-canvas

node-skia-canvas is a W3C Canvas API implementation for Node.js. It is based on Google skia, and written with Node-API, provide similar canvas development just like on the browser.

Introduction

There is already a Canvas works on node, but here is some enhancement, and take this package as a replacemnt of node-canvas:

• Using Node-API to solve the ABI issue
• Some skia module extension, for example: skparagraph, pathkit, sklottie
• Working in node worker-thread to provide the possibility of multi-thread processing (Working in progress)
• GPU context support (Working in progress)

The project is written by C++ style API with node-addon-api, and built with cmake-js, and use prebuild and prebuild-install to prevent user enviroment building.

Consider about the complex host environment, so this package decide to let skia deps be static linked, compiling features could check the build script scripts/build_tools/build_skia.js in this project.

Install

npm install --save node-skia-canvas

Example

const { createCanvas } = require('node-skia-canvas')

const canvas = createCanvas(256, 256)
const ctx = canvas.getContext('2d')

ctx.fillStyle = '#FFF'
ctx.fillRect(0, 0, 256, 256)

ctx.fillStyle = '#4285F4'
ctx.fillRect(10, 10, 100, 160)

ctx.fillStyle = '#0F9D58'
ctx.beginPath()
ctx.arc(180, 50, 25, 0, 2 * Math.PI)
ctx.closePath()
ctx.fill()

ctx.fillStyle = '#DB4437'
ctx.beginPath()
ctx.ellipse(100, 160, 50, 80, 0, 0, 2 * Math.PI)
ctx.closePath()
ctx.fill()

ctx.lineWidth = 5
ctx.strokeStyle = '#F4B400'
ctx.strokeRect(80, 50, 100, 160)

And get result:

You could run example by the script in scripts folder:

node scripts/run_example.js skia_showcase

API Documentation

Implement the Standard Canvas API:

• Canvas
• CanvasRenderingContext2D
• CanvasGradient (not expose)
• CanvasPattern (not expose)
• DOMMatrix
• TextMetrix (not expose)

And also provide some useful module:

• Image, for image use
• registerFont, for font management

Canvas

Differ from the creation of canvas in DOM, we create canvas by instantiation Canvas, or use createCanvas:

// Instantication
const canvas = new Canvas(300, 300)
// or use factory method
const canvas = createCanvas(300, 300)

Properties:

• width
• height

Methods:

• getContext()
• toBuffer() ✨
• toDataURL()

✨ toBuffer(mimeType = 'image/png')

Not like canvas tag in browser, we need get real buffer information as result on server, so you could use this API, and it now support JPEG/PNG by pass mimeType, image/png will be used if format is not specified.

const canvas = new Canvas(300, 300)
const ctx = canvas.getContext('2d')

// some canvas operation...

canvas.toBuffer('image/png') // or image/jpeg

CanvasRenderingContext2D

Use it just like in browser, the API is almost the same (only support 2d for now, gl context is working in progress):

const canvas = new Canvas(300, 300)
const ctx = canvas.getContext('2d')

ctx.fillStyle = '#FFF'
ctx.fillRect(0, 0, 256, 256)

Properties:

• fillStyle
• font
• globalAlpha
• globalCompositeOperation
• imageSmoothingEnabled
• lineCap
• lineDashOffset
• lineJoin
• lineWidth
• miterLimit
• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY
• strokeStyle
• textAlign
• textBaseline
• textDecoration ✨

Methods:

• arc()
• arcTo()
• beginPath()
• bezierCurveTo()
• clearRect()
• clip()
• closePath()
• createImageData()
• createLinearGradient()
• createPattern()
• createRadialGradient()
• drawImage()
• ellipse()
• fill()
• fillRect()
• fillText() ✨
• getImageData()
• getLineDash()
• getTransform()
• lineTo()
• measureText()
• moveTo()
• putImageData()
• quadraticCurveTo()
• rect()
• restore()
• rotate()
• save()
• scale()
• setLineDash()
• setTransform()
• stroke()
• strokeRect()
• strokeText()
• transform()
• translate()

✨ textDecoration

Enhanced feature for text rendering, provide text-decoration property and use just like the property in CSS: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> || <'text-decoration-thickness'>

const canvas = createCanvas(image.width, image.height)
const ctx = canvas.getContext('2d')

ctx.fillStyle = '#000'
ctx.textBaseline = 'top'
ctx.font = '24px/1.2 "PingFang SC"'
ctx.textDecoration = 'line-through'

✨ fillText(x, y, text, [maxWidth])

Provide extra parameter maxWidth to provide word-wrap typography, it is documented on MDN, but not implemented in most browser, but this library implemented this extra parameter.

Image

Here is a helper class for image usage, and used in drawImage as parameter:

const fs = require('fs')
const { Image } = require('node-skia-canvas')

const imgData = fs.readFileSync('./examples/leize.jpeg')
const image = new Image()
image.src = imgData

const canvas = createCanvas(image.width, image.height)
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, image.width, image.height)

Properties

• width
• height
• src

About loadImage

There is an API loadImage provided by node-canvas, but you may have your own favorite network library like: urllib、universal-fetch, etc. So this loadImage helper api may not that helpful, so it will not be provided currently.

Font Management

We provide font management API and compat with node-canvas:

✨ registerFont(path, [{ family, weight }])

Register font to canvas, if family or weight is not provided, it will be parsed from font file automatically.

const { registerFont } = require('node-skia-canvas')

registerFont(path.join(__dirname, './OswaldRegular.ttf'), {
  family: 'Oswald'
})
registerFont(path.join(__dirname, './OswaldLight.ttf'))
registerFont(path.join(__dirname, './OswaldBold.ttf'))

Acknowledgements

Thanks to node-canvas for their test cases.

License

MIT