npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

node-skia-canvas

v0.1.6

Published

Skia based graphics canvas run on node.js, written in Node-API

Downloads

13

Readme

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.

xx badge badge MIT

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:

5uiU2R.png

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:

Methods:

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:

Methods:

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

About loadImage

There is an API loadImage provided by node-canvas, but you may have your own favorite network library like: urllibuniversal-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