Roadmap

[Brooooooklyn]

0.1. The first usable version

Canvas

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

CanvasRenderingContext2D

Property

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

Methods

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

Path2D

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

Text rendering

• maxWidth
• font weight
• font variant
• font style

ImageData

Constructor

• width/height
• Uint8ClampedArray/width
• Uint8ClampedArray/width/height

Property

• data
• width
• height

Image

Property

• width
• height
• alt
• complete
• crossOrigin
• currentSrc
• decoding
• loading
• naturalWidth
• 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.