Roadmap

[Brooooooklyn]

0.1. The first usable version

Canvas

• [x] createCanvas
• [x] getContext
• [x] png
• [x] jpeg
• [x] svg
• [ ] pdf
• [x] avif
• [ ] gif
• [x] webp
• [x] data
• [x] toDataURL

CanvasRenderingContext2D

Property

• [x] canvas
• [x] fillStyle
• [x] filter
• [x] font
• [x] globalAlpha
• [x] globalCompositeOperation
• [x] imageSmoothingEnabled
• [x] imageSmoothingQuality
• [x] lineCap
• [x] lineDashOffset
• [x] lineJoin
• [x] lineWidth
• [x] miterLimit
• [x] shadowBlur
• [x] shadowColor
• [x] shadowOffsetX
• [x] shadowOffsetY
• [x] strokeStyle
• [x] textAlign
• [x] textBaseline
• [x] letterSpacing
• [x] wordSpacing
• [ ] fontStretch
• [ ] fontKerning
• [ ] fontVariantCaps

Methods

• [x] arc
• [x] arcTo
• [x] beginPath
• [x] bezierCurveTo
• [x] clearRect
• [x] clip
• [x] closePath
• [x] createImageData
• [x] createLinearGradient
• [x] createPattern
• [x] createRadialGradient
• [x] drawImage
• [x] ellipse
• [x] fill
• [x] fillRect
• [x] fillText
• [x] getContextAttributes
• [x] getImageData
• [x] getLineDash
• [x] getTransform
• [x] isPointInPath
• [x] isPointInStroke
• [x] lineTo
• [x] measureText
• [x] moveTo
• [x] putImageData
• [x] quadraticCurveTo
• [x] rect
• [x] resetTransform
• [x] restore
• [x] rotate
• [x] save
• [x] scale
• [x] setLineDash
• [x] setTransform
• [x] stroke
• [x] strokeRect
• [x] strokeText
• [x] transform
• [x] translate

Path2D

• [x] Constructor
• [x] addPath
• [x] closePath
• [x] moveTo
• [x] lineTo
• [x] bezierCurveTo
• [x] quadraticCurveTo
• [x] arc
• [x] arcTo
• [x] ellipse
• [x] rect

Text rendering

• [x] maxWidth
• [x] font weight
• [x] font variant
• [x] font style

ImageData

Constructor

• [x] width/height
• [x] Uint8ClampedArray/width
• [x] Uint8ClampedArray/width/height

Property

• [x] data
• [x] width
• [x] height

Image

Property

• [x] width
• [x] height
• [x] alt
• [x] complete
• [ ] crossOrigin
• [ ] currentSrc
• [ ] decoding
• [ ] loading
• [x] naturalWidth
• [x] naturalHeight

Methods

• [ ] decode

0.2. Testing, code cleanup and performance

0.3. API stable, documents

1.0

[jo32]

seems missing 'measureFont' ?

[ap0sentada]

seems missing "filter"

[Brooooooklyn]

@ap0sentada filter was implemented

[MegaTeam89]

can you please implement a deregisterFont method?

[ap0sentada]

the .fillStyle = "color" property doesn't supports rgba, like canvas does. you need to change the opacity via globalAlpha, but you should be able tu change it with rgba (with <context>.fillStyle = "rgba(0,0,0,0.4)")

[ap0sentada]

missing

<context>.letterSpacing: number

[maxtull]

Missing

CanvasRenderingContext2D.fontStretch: 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'normal' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded'

[sefaistee07]

Help ne! When I install Termux on Android, I get the following error: /storage/emulated/0/morsel_bot/node_modules/@napi-rs/canvas/js-binding.js:216 throw loadError ^

Error: dlopen failed: library "/storage/emulated/0/morsel_bot/node_modules/@napi-rs/canvas-android-arm64/skia.android-arm64.node" needed or dlopened by "/data/data/com.termux/files/usr/bin/node" is not accessible for the namespace "(default)" at Module._extensions..node (node:internal/modules/cjs/loader:1454:18) at Module.load (node:internal/modules/cjs/loader:1208:32) at Module._load (node:internal/modules/cjs/loader:1024:12) at Module.require (node:internal/modules/cjs/loader:1233:19) at require (node:internal/modules/helpers:179:18) at Object. (/storage/emulated/0/morsel_bot/node_modules/@napi-rs/canvas/js-binding.js:33:29) at Module._compile (node:internal/modules/cjs/loader:1358:14) at Module._extensions..js (node:internal/modules/cjs/loader:1416:10) at Module.load (node:internal/modules/cjs/loader:1208:32) at Module._load (node:internal/modules/cjs/loader:1024:12) { code: 'ERR_DLOPEN_FAILED' }

Node.js v20.15.1 /sdcard/morsel_bot $

[xeoshow]

Seems the most features are implemented, is there any ETA for the first release version? Thanks.

[cmahnke]

Since this lib is advertised as a drop in replacement for node-canvas the roadmap should include for version 0.3 a documentation to reliably use this instead of node-canvas as a transitive dependency. Certainly using overrides - not sure how reliable those work in npm.

[rgigger]

Just an FYI this project is already more stable for me than node-canvas. I was using node-canvas with pdfjs-dist to convert PDFs to images. node-canvas has a bunch of memory management issues and segfaults. even though I was using the API in a very straightforward way.

I dropped in @napi-rs/canvas and everything pretty much just worked. I am doing the font handling in pdfjs though and just passing on path commands so I'm not hitting any of that code.

Memory safe languages for the win.

[xeoshow]

Just an FYI this project is already more stable for me than node-canvas. I was using node-canvas with pdfjs-dist to convert PDFs to images. node-canvas has a bunch of memory management issues and segfaults. even though I was using the API in a very straightforward way.

I dropped in @napi-rs/canvas and everything pretty much just worked. I am doing the font handling in pdfjs though and just passing on path commands so I'm not hitting any of that code.

Memory safe languages for the win.

Really very nice info, hopefully there could be a release version soon 👍 😄