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.

[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 👍 😄

[GreenFlag31]

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.

Could you show a simple exemple using @napi-rs/canvas instead of canvas for transforming pdf to images ? Can't make it work.

[cmahnke]

Please have a look at Automattic/node-canvas#2448 (comment)
The author @Sieabah mentions problems with different handling of clipping masks while switching from node-canvas, I can't find those in the roadmap, can these be added, please?

[Brooooooklyn]

@cmahnke what kind of operations are not aligned with Browser? It should be bugs and I will fix it. If you can reproduce the behavior differences with the browser, feel free to fire a bug in this repo.

[cmahnke]

@Brooooooklyn Thanks, it's not "my" bug, I was just collecting it from the referenced node-canvas issue. Maybe @Sieabah might give a description.

[Sieabah]

@Brooooooklyn
I didn't want to add extra work to this project for something that isn't immediately needed for the vast majority of people. If there is a better way to do this I'd also be open to doing it that way, but this is what I did with node-canvas and regular canvas. I cannot share the exact code or layout, but here is roughly the idea.

1. Get 2d context from passed canvas
2. ctx.save()
3. ctx.beginPath()
4. Iterate through array of cutout paths

• drawCutout()
• get 2d context
• translate(position, baseline) & rotation if applicable (to center and align the canvas onto the shape coordinate space)
• ctx[shapeType](...args)
• resetTransform()

5. ctx.clip()
6. ctx.clearRect(/* size of canvas */) // <-- The bug is probably here
7. ctx.restore()

Now this is meant to "punch through" with a shape or custom path. I don't have example images that I can freely share as they are sensitive as well. Just imagine a base image (doesn't matter what) with shapes cut out. If you can imagine a physical piece of paper, the following diagram could help convey what I'm doing in a literal sense.

I had not volunteered to add this report myself and I don't have an expectation that this will be fixed, supported, or changed on any timeline of my own. You're free to investigate/reject as you see fit. I'm moving to rewrite this entire component outside of JS due to it being the nth time having to touch this. It has been the opposite of a time saver to have the JS flexibility here 😬