lecodes-web-canvas 2.0.2 → 2.0.3

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "lecodes-web-canvas",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "The tree UI of LeCodes' web renderers: the runtime's HostUI in TypeScript (TreeUI) + the render tree, painted to a 2D canvas — in the browser (web/renderer) or headless (lecodes-headless)",
   "type": "module",
   "license": "MIT",
   "main": "src/runtime/TreeUI.ts",
   "dependencies": {
-    "lecodes-sdk": "2.0.2",
-    "lecodes-web-runtime": "2.0.2",
-    "lecodes-web-shared": "2.0.2"
+    "lecodes-sdk": "2.0.3",
+    "lecodes-web-runtime": "2.0.3",
+    "lecodes-web-shared": "2.0.3"
   },
   "devDependencies": {
     "typescript": "~5.8.3",

package/src/paint/Canvas2DPainter.ts

@@ -212,14 +212,15 @@ export class Canvas2DPainter implements Painter {
   drawImage(image: ImageInfo, srcRect: Rect | null, dst: Rect, opts: DrawImageOpts) {
     if (!image.handle) return
     // An explicit crop fills the box; otherwise resolve object-fit.
-    const { src, dst: d } = srcRect
+    const fit = srcRect
       ? { src: srcRect, dst }
       : computeObjectFit(image.naturalWidth, image.naturalHeight, dst, opts.fit)
+    const d = fit.dst
+    let src = fit.src
     // The destination in DEVICE pixels: what a vector source rasterizes at, and the tint scratch's
     // size — the frame is painted under the dpr transform, so a CSS-px scratch would be upscaled.
     const dw = Math.max(1, Math.ceil(d.width * this.dpr))
     const dh = Math.max(1, Math.ceil(d.height * this.dpr))
-    const handle = (image.rasterize ? image.rasterize(dw, dh) : image.handle) as CanvasImageSource
 
     // When we're drawing the WHOLE image (no atlas crop, not a cover-crop) draw it WITHOUT a source
     // rect. A viewBox-only SVG `<img>` has the browser's default 300×150 raster, so a source crop
@@ -228,6 +229,21 @@ export class Canvas2DPainter implements Painter {
     // and keeps the working tinted/scratch path consistent with the direct path).
     const whole = !srcRect && opts.fit !== "cover"
 
+    let handle = image.handle as CanvasImageSource
+    if (image.rasterize) {
+      if (whole) handle = image.rasterize(dw, dh) as CanvasImageSource
+      else {
+        // A crop is in the source's NATURAL units: the vector is rasterized whole at the scale the
+        // crop is drawn at, and the crop is taken in that raster's pixels.
+        const k = Math.max(dw / src.width, dh / src.height)
+        const rw = Math.max(1, Math.ceil(image.naturalWidth * k))
+        const rh = Math.max(1, Math.ceil(image.naturalHeight * k))
+        handle = image.rasterize(rw, rh) as CanvasImageSource
+        const kx = rw / image.naturalWidth, ky = rh / image.naturalHeight
+        src = { x: src.x * kx, y: src.y * ky, width: src.width * kx, height: src.height * ky }
+      }
+    }
+
     if (opts.tint === undefined) {
       if (whole) this.ctx.drawImage(handle, d.x, d.y, d.width, d.height)
       else this.ctx.drawImage(handle, src.x, src.y, src.width, src.height, d.x, d.y, d.width, d.height)