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.