buninu-browser 0.7.0 → 0.9.0

package/lib/renderer/canvas-2d.js

@@ -1,3 +1,4 @@
+import {roundRect} from './canvas-round-rect.js';
 /**
  * Page `<canvas>` 2d contexts, drawn by this process's CanvasKit.
  *
@@ -18,6 +19,10 @@
 import { drawQmlDomImage } from "../qml/canvas-dom.js";
 // qml handle end
 
+import { makeRasterSurface } from "./raster-surface.js";
+
+import { createSoftwareGL } from "./webgl/context.js";
+
 let CanvasKit = null;
 
 /** The CanvasKit `loadGraphics` instantiated. Page canvases share it. */
@@ -35,13 +40,31 @@ const collectedContexts = new FinalizationRegistry(releaseSurface);
 const DRAW_METHODS = new Set(["clearRect", "drawImage", "fill", "fillRect", "fillText", "stroke", "strokeRect", "strokeText", "putImageData"]);
 const CONTEXT_METHODS = new Set(("arc arcTo beginPath bezierCurveTo clearRect clip closePath createImageData createLinearGradient createPattern createRadialGradient drawFocusIfNeeded drawImage ellipse fill fillRect fillText getImageData getLineDash getTransform isPointInPath isPointInStroke lineTo measureText moveTo putImageData quadraticCurveTo rect reset resetTransform restore rotate roundRect save scale setLineDash setTransform stroke strokeRect strokeText transform translate").split(" "));
 const CONTEXT_PROPERTIES = new Set(("canvas direction fillStyle filter font fontKerning fontStretch fontVariantCaps globalAlpha globalCompositeOperation imageSmoothingEnabled imageSmoothingQuality letterSpacing lineCap lineDashOffset lineJoin lineWidth miterLimit shadowBlur shadowColor shadowOffsetX shadowOffsetY strokeStyle textAlign textBaseline textRendering wordSpacing").split(" "));
+// Native pattern shaders are requested synchronously by the drawing context.
+// A pattern may be shared across contexts: sampling belongs to the consumer.
+let patternSampling = { imageSmoothingEnabled: true, imageSmoothingQuality: "low" };
 const nativeStyles = new WeakMap();
 const publicStyles = new WeakMap();
+const patternImages = new WeakMap();
+const gradientDescriptions = new WeakMap();
+const imagePaints = new WeakMap();
+function imagePaint(context) {
+  let key=imagePaints.get(context);
+  if(key===undefined){
+    // Cache the field name, never the Paint: restore() replaces and deletes
+    // the old base Paint. Copying it avoids building a fill-style shader.
+    key=Object.keys(context).find(name=>context[name] instanceof CanvasKit.Paint);
+    if(key!==undefined)imagePaints.set(context,key);
+  }
+  const paint=key!==undefined?context[key].copy():context.Ke();
+  paint.setShader(null);paint.setAlphaf(context.globalAlpha);
+  return paint;
+}
 const collectedStyles = new FinalizationRegistry(native => native.ie());
 
 // CanvasKit's gradient/pattern shims expose shader handles and disposal
 // methods. Only the standard author-facing methods may cross into a page.
-function publicStyle(native) {
+function publicStyle(native, patternResource = null) {
   if (native === null || typeof native !== "object") return native;
   let wrapper = publicStyles.get(native)?.deref();
   if (wrapper) return wrapper;
@@ -53,7 +76,11 @@ function publicStyle(native) {
       // WebIDL converts these before entering the native implementation.
       // The shim otherwise stores the original offset object in its stops,
       // which could retain the facade/DOM through finalizer holdings.
-      if (gradient) native.addColorStop(Number(args[0]), String(args[1]));
+      if (gradient) {
+        const offset=Number(args[0]),color=String(args[1]);
+        native.addColorStop(offset,color);
+        gradientDescriptions.get(native)?.stops.push([offset,color]);
+      }
       else native.setTransform(...args);
     }, writable: true, configurable: true, enumerable: true },
     [Symbol.toStringTag]: { value: gradient ? "CanvasGradient" : "CanvasPattern", configurable: true },
@@ -67,6 +94,7 @@ function publicStyle(native) {
   // The current pattern shim may retain its page-supplied image object;
   // do not root that DOM graph in finalizer holdings. Gradients retain only
   // numeric coordinates/colors and their private native shader.
+  if (patternResource) collectedStyles.register(wrapper, patternResource, patternResource);
   if (gradient) {
     collectedStyles.unregister(native);
     collectedStyles.register(wrapper, native, native);
@@ -74,6 +102,25 @@ function publicStyle(native) {
   return wrapper;
 }
 
+const contextMethods = new WeakMap();
+/** Per-document interface: libraries may feature-detect or extend its prototype. */
+export function canvasRenderingContextInterface() {
+  function CanvasRenderingContext2D(){throw new TypeError('Illegal constructor');}
+  for(const name of CONTEXT_METHODS) {
+    if(['drawFocusIfNeeded','reset'].includes(name))continue;
+    Object.defineProperty(CanvasRenderingContext2D.prototype,name,{configurable:true,writable:true,enumerable:true,
+      value:function(...args){
+        const read=contextMethods.get(this);
+        if(!read)throw new TypeError('Illegal invocation');
+        const method=read(name);
+        if(typeof method!=='function')throw new TypeError('Unsupported Canvas operation');
+        return method(...args);
+      }});
+  }
+  Object.defineProperty(CanvasRenderingContext2D.prototype,Symbol.toStringTag,{value:'CanvasRenderingContext2D',configurable:true});
+  return CanvasRenderingContext2D;
+}
+
 /** Drawing changes paint, without requiring a DOM mutation or full layout. */
 export function observeDocumentCanvases(document, changed) {
   documentChanges.set(document, changed);
@@ -87,8 +134,17 @@ function changed(state) {
   if (node) documentChanges.get(node.ownerDocument)?.(node);
 }
 
+function clearGradientCache(state) {
+  for(const entry of state.gradientCache?.values()??[])entry.image.delete();
+  state.gradientCache?.clear();state.gradientCandidates?.clear();state.gradientCacheBytes=0;
+}
+
 function releaseSurface(state) {
+  clearGradientCache(state);
   if (!state.surface) return;
+  for(const pattern of state.patterns??[])pattern.ie();
+  state.patterns?.clear();
+  state.gl?.dispose();
   state.image?.delete();
   state.image = state.resource = null;
   state.surface.dispose();
@@ -110,26 +166,37 @@ export function disposeDocumentCanvases(document) {
 
 /** The element's 2d context, or null for any other context id or before CanvasKit loads. */
 export function canvasContext(node, type, options = null) {
-  if (type !== "2d" || !CanvasKit) return null;
+  if (!["2d", "webgl", "experimental-webgl"].includes(type) || !CanvasKit) return null;
+  const kind=type==='2d'?'2d':'webgl';
   let entry = surfaces.get(node);
   if (!entry) {
     entry = open(node);
     if (!entry) return null;
+    entry.kind=kind;
+    if(kind==='webgl'){
+      const gl=createSoftwareGL(CanvasKit,entry.state,changed,options);
+      entry.gl=gl;
+      entry.state.gl={dispose:gl.dispose,reset:gl.reset,flush:gl.flush};
+      collectedContexts.unregister(entry.state);
+      collectedContexts.register(gl.proxy,entry.state,entry.state);
+    }
     surfaces.set(node, entry);
   }
-  if (options) entry.configure(options);
-  return entry.proxy;
+  if(entry.kind!==kind)return null;
+  if (options) {if(entry.gl)entry.gl.configure(options);else entry.configure(options);}
+  return entry.gl?.proxy ?? entry.proxy;
 }
 
 /** Setting width or height clears the bitmap and the drawing state. */
 export function resetCanvas(node) {
-  surfaces.get(node)?.reopen();
+  const entry=surfaces.get(node);entry?.reopen();entry?.state.gl?.reset();
 }
 
 /** A refcounted native snapshot: no PNG/base64/readPixels round trip. */
 export function canvasResource(node) {
   const state = surfaces.get(node)?.state;
   if (!state?.surface || !state.raster) return null;
+  state.gl?.flush();
   if (!state.resource) {
     state.raster.flush();
     state.image = state.raster.makeImageSnapshot();
@@ -182,7 +249,7 @@ function open(node) {
   owner?.add(state);
   const methods = new Map();
   let publicCanvas = null, resolveImage = null, parseFont = null, text = null;
-  const textDefaults = () => ({ font: "10px sans-serif", parsedFont: { fontSize: 10, fontFamily: ["sans-serif"], fontWeight: 400, fontStyle: "normal", fontStretch: 100 },
+  const textDefaults = () => ({ imageSmoothingEnabled: true, imageSmoothingQuality: "low", font: "10px sans-serif", parsedFont: { fontSize: 10, fontFamily: ["sans-serif"], fontWeight: 400, fontStyle: "normal", fontStretch: 100 },
     textAlign: "start", textBaseline: "alphabetic", direction: "inherit" });
   let settings = textDefaults();
   const settingsStack = [];
@@ -192,18 +259,20 @@ function open(node) {
     if (!state.context) throw new DOMException("The canvas document has been discarded.", "InvalidStateError");
     return state.context;
   };
-  const proxy = new Proxy(Object.create(null), {
+  let proxy;
+  const target=Object.create(null);
+  const handler = {
     get(_target, property) {
       if (property === "canvas") return publicCanvas;
       if (!CONTEXT_METHODS.has(property) && !CONTEXT_PROPERTIES.has(property)) return undefined;
       const context = currentContext();
-      if (text && Object.hasOwn(settings, property) && property !== "parsedFont") return settings[property];
+      if (Object.hasOwn(settings, property) && property !== "parsedFont") return settings[property];
       // The shim's strokeStyle getter assumes every value is a color, even
       // after accepting a gradient. Keep the page's branded style identity.
       if ((property === "fillStyle" || property === "strokeStyle") && styleValues[property]) return styleValues[property];
       const value = context[property];
       if (property === "fillStyle" || property === "strokeStyle") return publicStyle(value);
-      const custom = property === "getTransform";
+      const custom = property === "getTransform" || property === "roundRect";
       if (typeof value !== "function" && !custom) return value;
       let method = methods.get(property);
       if (!method) {
@@ -211,14 +280,18 @@ function open(node) {
         // keeps its resource alive while a caller retains only the method.
         method = function (...args) {
           const context = currentContext();
+          if (property === "roundRect") return roundRect(context,...args);
           if (property === "getTransform") {
             const matrix = state.raster.getCanvas().getTotalMatrix();
             return { a: matrix[0], b: matrix[3], c: matrix[1], d: matrix[4], e: matrix[2], f: matrix[5], is2D: true };
           }
           if (text && ["fillText", "strokeText", "measureText"].includes(property)) {
-            const result = text({ operation: property, args, context, canvas: state.raster.getCanvas(), settings,
+            const previousSampling=patternSampling;
+            let result;
+            patternSampling=settings;
+            try { result = text({ operation: property, args, context, canvas: state.raster.getCanvas(), settings,
               paintStyle: nativeStyles.get(styleValues[property === "strokeText" ? "strokeStyle" : "fillStyle"]),
-            });
+            }); } finally { patternSampling=previousSampling; }
             if (property !== "measureText") changed(state);
             return result;
           }
@@ -226,6 +299,41 @@ function open(node) {
             throw new DOMException("The canvas contains cross-origin image data.", "SecurityError");
           }
           let source;
+          if(property === 'createPattern') {
+            const repetition=args[1]===undefined||args[1]===null||args[1]===''?'repeat':String(args[1]);
+            if(!['repeat','repeat-x','repeat-y','no-repeat'].includes(repetition))throw new DOMException('Invalid repetition','SyntaxError');
+            const resource=resolveImage?resolveImage(args[0]):canvasResource(args[0]);
+            if(!resource?.image){
+              if(!['IMG','CANVAS','VIDEO','IMAGE'].includes(args[0]?.tagName))throw new TypeError('CanvasImageSource required');
+              return null;
+            }
+            // Retain a native snapshot handle, not a page object or a borrowed
+            // image that a source-canvas draw/reset can delete underneath us.
+            const image=resource.image.clone();let native;
+            try{native=context.createPattern(image,repetition);}catch(error){image.delete();throw error;}
+            // The upstream shim always uses bicubic filtering, even when an
+            // author disables smoothing. Apart from the wrong pixel-art output,
+            // that is very expensive for a repeated full-canvas background.
+            // Canvas save retains the same mutable pattern, as the DOM does.
+            // The upstream copy constructor also drops its image/transform.
+            // Avoid appending the same handle to the shim cleanup list on every save.
+            native.oe=undefined;
+            native.pe=function(){
+              this.ie();
+              const sampling=patternSampling;
+              return this.Td=sampling.imageSmoothingEnabled && sampling.imageSmoothingQuality==='high'
+                ? image.makeShaderCubic(this.ve,this.we,1/3,1/3,this._transform)
+                : image.makeShaderOptions(this.ve,this.we,
+                  sampling.imageSmoothingEnabled?CanvasKit.FilterMode.Linear:CanvasKit.FilterMode.Nearest,
+                  CanvasKit.MipmapMode.None,this._transform);
+            };
+            patternImages.set(native,{image,repetition});
+            const owned=state.patterns??=new Set();
+            const pattern={ie(){if(!owned.delete(pattern))return;native.ie();image.delete();}};
+            owned.add(pattern);
+            if(resource.originClean===false)state.originClean=false;
+            return publicStyle(native,pattern);
+          }
           if (property === "drawImage" && resolveImage) {
             source = resolveImage(args[0]);
             if (!source?.image) return;
@@ -240,7 +348,30 @@ function open(node) {
 
             args[0] = source.image;
           }
-          const result = context[property](...args);
+          const previousSampling=patternSampling;
+          let result;
+          patternSampling=settings;
+          try {
+            if (property === "fillRect" && fillCachedGradient(state,context,nativeStyles.get(styleValues.fillStyle),args)) {
+              // Cache radial rasters and reduce vertical gradients to one column.
+            } else if (property === "fillRect" && fillPatternTiles(state,context,settings,nativeStyles.get(styleValues.fillStyle),args)) {
+              // Integer, unsmoothed tiles can use Skia's image blit pipeline.
+            } else if (property === "drawImage" && [3,5,9].includes(args.length)) {
+              // Images use globalAlpha, never the current fill color/pattern.
+              const image=args[0],paint=imagePaint(context);
+              const src=args.length===9?CanvasKit.XYWHRect(...args.slice(1,5)):CanvasKit.XYWHRect(0,0,image.width(),image.height());
+              const dst=args.length===9?CanvasKit.XYWHRect(...args.slice(5,9))
+                :CanvasKit.XYWHRect(args[1],args[2],args[3]??image.width(),args[4]??image.height());
+              try {
+                const canvas=state.raster.getCanvas();
+                if(settings.imageSmoothingEnabled && settings.imageSmoothingQuality==='high')
+                  canvas.drawImageRectCubic(image,src,dst,1/3,1/3,paint);
+                else canvas.drawImageRectOptions(image,src,dst,
+                  settings.imageSmoothingEnabled?CanvasKit.FilterMode.Linear:CanvasKit.FilterMode.Nearest,
+                  CanvasKit.MipmapMode.None,paint);
+              } finally { paint.delete(); }
+            } else result = context[property](...args);
+          } finally { patternSampling=previousSampling; }
           if (property === "save") {
             settingsStack.push({ ...settings });
             styleStack.push({ ...styleValues });
@@ -253,6 +384,7 @@ function open(node) {
           }
           if (source?.originClean === false) state.originClean = false;
           if (DRAW_METHODS.has(property)) changed(state);
+          if (property === "createRadialGradient" || property === "createLinearGradient") gradientDescriptions.set(result,{kind:property,coordinates:args.map(Number),stops:[]});
           if (property === "createLinearGradient" || property === "createRadialGradient" || property === "createPattern") return publicStyle(result);
           return property === "getImageData" ? copyImageData(result) : result;
         }.bind(proxy);
@@ -277,6 +409,11 @@ function open(node) {
         if (parsed) { settings.font = String(value); settings.parsedFont = parsed; }
         return true;
       }
+      if (property === "imageSmoothingEnabled") { settings[property]=Boolean(value); return true; }
+      if (property === "imageSmoothingQuality") {
+        if (["low","medium","high"].includes(String(value))) settings[property]=String(value);
+        return true;
+      }
       if (text && Object.hasOwn(settings, property)) {
         const values = { textAlign: ["start", "end", "left", "right", "center"], textBaseline: ["top", "hanging", "middle", "alphabetic", "ideographic", "bottom"], direction: ["inherit", "ltr", "rtl"] };
         if (values[property]?.includes(String(value))) settings[property] = String(value);
@@ -286,15 +423,21 @@ function open(node) {
       return true;
     },
     has(_target, property) {
-      return property === "canvas" || property === "getTransform" || (CONTEXT_METHODS.has(property) || CONTEXT_PROPERTIES.has(property)) && (property in currentContext() || text && Object.hasOwn(settings, property));
+      return property === "canvas" || property === "getTransform" || property === "roundRect" || (CONTEXT_METHODS.has(property) || CONTEXT_PROPERTIES.has(property)) && (property in currentContext() || text && Object.hasOwn(settings, property));
     },
+  };
+  proxy=new Proxy(target,{...handler,
+    get(target,property,receiver){return property in target?Reflect.get(target,property,receiver):handler.get(target,property);},
+    has(target,property){return property in target||handler.has(target,property);},
   });
+  contextMethods.set(proxy,property=>handler.get(target,property));
   collectedContexts.register(proxy, state, state);
   return {
     state,
     proxy,
     configure(options) {
       publicCanvas = options.canvas;
+      if(options.prototype)Object.setPrototypeOf(target,options.prototype);
       resolveImage = options.resolveImage;
       parseFont = options.parseFont;
       text = options.text;
@@ -304,6 +447,7 @@ function open(node) {
       const next = makeSurface(node);
       if (!next) return;
       const previous = state.surface;
+      clearGradientCache(state);
       state.surface = next;
       state.raster = nativeSurface(next);
       state.context = next.getContext("2d");
@@ -319,9 +463,115 @@ function open(node) {
   };
 }
 
+// Cache shadow-free source-over gradient rectangles. Vertical gradients
+// shade one device-pixel column and repeat it without interpolation. The raster includes
+// the device transform but excludes alpha and clipping, which apply at blit.
+// Keys include mutable stops; no DOM or author object is retained by entries.
+function fillCachedGradient(state,context,style,args) {
+  const gradient=gradientDescriptions.get(style);
+  if(!gradient||args.length!==4||!args.every(Number.isFinite)
+    ||context.globalCompositeOperation!=='source-over'
+    ||CanvasKit.parseColorString(context.shadowColor)[3]!==0)return false;
+  const canvas=state.raster.getCanvas(),matrix=canvas.getTotalMatrix();
+  if(matrix[1]!==0||matrix[3]!==0||matrix[6]!==0||matrix[7]!==0||matrix[8]!==1||matrix[0]<=0||matrix[4]<=0)return false;
+  const [x,y,w,h]=args;if(w<=0||h<=0)return false;
+  const left=Math.max(0,Math.floor(x*matrix[0]+matrix[2])),top=Math.max(0,Math.floor(y*matrix[4]+matrix[5]));
+  const right=Math.min(state.width,Math.ceil((x+w)*matrix[0]+matrix[2])),bottom=Math.min(state.height,Math.ceil((y+h)*matrix[4]+matrix[5]));
+  const width=right-left,height=bottom-top,bytes=width*height*4;
+  if(width<=0||height<=0)return true;
+  if(bytes>8*1024*1024)return false;
+  const vertical=gradient.kind==='createLinearGradient'&&gradient.coordinates[0]===gradient.coordinates[2];
+  if(gradient.kind==='createLinearGradient'&&!vertical)return false;
+  if(vertical&&[x*matrix[0]+matrix[2],(x+w)*matrix[0]+matrix[2]].some(v=>Math.abs(v-Math.round(v))>1e-4))return false;
+  const rasterWidth=vertical?1:width;
+  const key=JSON.stringify([gradient.kind,gradient.coordinates,gradient.stops,args,Array.from(matrix),left,top,width,height]);
+  // Admit a full radial raster only after reuse, so animated unique
+  // gradients retain their ordinary shader path without snapshot churn.
+  if(!vertical){
+    const candidates=state.gradientCandidates??=new Set();
+    if(!candidates.has(key)){
+      if(candidates.size>=16)candidates.delete(candidates.values().next().value);
+      candidates.add(key);return false;
+    }
+  }
+  const cache=state.gradientCache??=new Map();let entry=cache.get(key);
+  if(!entry){
+    const surface=makeRasterSurface(CanvasKit,rasterWidth,height);if(!surface)return false;
+    let paint;
+    try {
+      paint=context.Ke();paint.setAlphaf(1);
+      const target=surface.getCanvas();target.translate(-left,-top);target.concat(matrix);
+      target.drawRect(CanvasKit.XYWHRect(x,y,w,h),paint);
+      entry={image:surface.makeImageSnapshot(),bytes};
+    } finally {paint?.dispose();surface.dispose();}
+    while(cache.size>=8||(state.gradientCacheBytes??0)+bytes>8*1024*1024){
+      const oldest=cache.keys().next().value,victim=cache.get(oldest);
+      cache.delete(oldest);state.gradientCacheBytes-=victim.bytes;victim.image.delete();
+    }
+    state.gradientCacheBytes=(state.gradientCacheBytes??0)+bytes;
+  } else cache.delete(key);
+  cache.set(key,entry);
+  const paint=imagePaint(context),inverse=CanvasKit.Matrix.invert(matrix);
+  canvas.save();
+  try{canvas.concat(inverse);
+    if(vertical)canvas.drawImageRectOptions(entry.image,CanvasKit.XYWHRect(0,0,1,height),CanvasKit.XYWHRect(left,top,width,height),CanvasKit.FilterMode.Nearest,CanvasKit.MipmapMode.None,paint);
+    else canvas.drawImage(entry.image,left,top,paint);}
+  finally{canvas.restore();paint.delete();}
+  return true;
+}
+
+// Avoid the generic repeated-image shader for a few pixel-aligned tiles.
+// Restrict this to source-over and nearest sampling: rotated, filtered, shadowed
+// and densely repeated fills keep the complete native shader implementation.
+function fillPatternTiles(state,context,settings,style,args) {
+  const resource=patternImages.get(style);
+  if(!resource || settings.imageSmoothingEnabled || context.globalCompositeOperation!=='source-over'
+    || CanvasKit.parseColorString(context.shadowColor)[3]!==0 || args.length!==4
+    || !args.every(Number.isSafeInteger))return false;
+  const matrix=state.raster.getCanvas().getTotalMatrix(),m=style._transform;
+  if(matrix[0]!==1||matrix[4]!==1||matrix[1]!==0||matrix[3]!==0
+    ||matrix[6]!==0||matrix[7]!==0||matrix[8]!==1
+    ||!Number.isSafeInteger(matrix[2])||!Number.isSafeInteger(matrix[5])
+    ||m[0]!==1||m[4]!==1||m[1]!==0||m[3]!==0
+    ||!Number.isSafeInteger(m[2])||!Number.isSafeInteger(m[5]))return false;
+  let [x,y,w,h]=args;if(w<0){x+=w;w=-w;}if(h<0){y+=h;h=-h;}
+  if(!w||!h)return true;
+  // The canvas itself already clips this fill. Bound iteration by its visible
+  // rectangle, even when authors fill an enormous offscreen area.
+  const left=Math.max(x,-matrix[2]),top=Math.max(y,-matrix[5]);
+  const right=Math.min(x+w,state.width-matrix[2]),bottom=Math.min(y+h,state.height-matrix[5]);
+  if(right<=left||bottom<=top)return true;
+  const {image,repetition}=resource,iw=image.width(),ih=image.height();
+  let x0=Math.floor((left-m[2])/iw),x1=Math.ceil((right-m[2])/iw);
+  let y0=Math.floor((top-m[5])/ih),y1=Math.ceil((bottom-m[5])/ih);
+  if(repetition==='repeat-y'||repetition==='no-repeat'){x0=Math.max(0,x0);x1=Math.min(1,x1);}
+  if(repetition==='repeat-x'||repetition==='no-repeat'){y0=Math.max(0,y0);y1=Math.min(1,y1);}
+  if((x1-x0)*(y1-y0)>16)return false;
+  const canvas=state.raster.getCanvas(),paint=context.Ke();
+  paint.setShader(null);canvas.save();
+  try {
+    canvas.clipRect(CanvasKit.XYWHRect(left,top,right-left,bottom-top),CanvasKit.ClipOp.Intersect,false);
+    const source=CanvasKit.XYWHRect(0,0,iw,ih);
+    for(let ty=y0;ty<y1;ty++)for(let tx=x0;tx<x1;tx++)
+      canvas.drawImageRectOptions(image,source,CanvasKit.XYWHRect(m[2]+tx*iw,m[5]+ty*ih,iw,ih),
+        CanvasKit.FilterMode.Nearest,CanvasKit.MipmapMode.None,paint);
+  } finally {canvas.restore();paint.dispose();}
+  return true;
+}
+
 function makeSurface(node) {
+  const kit=CanvasKit;
   const [width, height] = bitmapSize(node);
-  return CanvasKit.MakeCanvas(width, height);
+  // Skia's fast raster pipelines use premultiplied pixels. The CanvasKit
+  // HTML shim allocates an unpremultiplied surface, forcing conversion while
+  // blending every image/pattern. Only exports need unpremultiplied RGBA.
+  // MakeCanvas constructs its private context synchronously through MakeSurface.
+  const factory=kit.MakeSurface;
+  let allocated=null;
+  kit.MakeSurface=(w,h)=>(allocated=makeRasterSurface(kit,w,h));
+  try { return kit.MakeCanvas(width,height); }
+  catch(error){allocated?.dispose();throw error;}
+  finally { kit.MakeSurface=factory; }
 }
 
 function nativeSurface(canvas) {

package/lib/renderer/canvas-round-rect.js

@@ -0,0 +1,36 @@
+// HTML Canvas roundRect: CSS radius expansion, edge-overlap reduction and
+// mirrored corners for negative dimensions. Adds to the existing path only.
+export function roundRect(context,x,y,width,height,radii=0) {
+ x=Number(x);y=Number(y);width=Number(width);height=Number(height);
+ const list=radii===null||typeof radii!=='object'||radii&&!radii[Symbol.iterator]?[radii]:Array.from(radii);
+ if(list.length<1||list.length>4)throw new RangeError('Expected one to four radii');
+ let corners=list.map(value=>{
+  const point=typeof value==='object'&&value!==null?{x:Number(value.x??0),y:Number(value.y??0)}:{x:Number(value),y:Number(value)};
+  if(point.x<0||point.y<0)throw new RangeError('Radius must not be negative');return point;
+ });
+ if(![x,y,width,height,...corners.flatMap(p=>[p.x,p.y])].every(Number.isFinite))return;
+ const [a,b=a,c=a,d=b]=corners;corners=[a,b,c,d];
+ const flipped=(width<0)!==(height<0);
+ if(width<0){x+=width;width=-width;corners=[corners[1],corners[0],corners[3],corners[2]];}
+ if(height<0){y+=height;height=-height;corners=[corners[3],corners[2],corners[1],corners[0]];}
+ let [tl,tr,br,bl]=corners;
+ const fit=(extent,sum)=>sum>0?extent/sum:1;
+ const ratio=Math.min(1,fit(width,tl.x+tr.x),fit(width,bl.x+br.x),fit(height,tl.y+bl.y),fit(height,tr.y+br.y));
+ [tl,tr,br,bl]=corners.map(p=>({x:p.x*ratio,y:p.y*ratio}));
+ const ellipse=(cx,cy,r,start,end)=>{
+  if(!r.x||!r.y){context.lineTo(cx+Math.cos(end)*r.x,cy+Math.sin(end)*r.y);return;}
+  context.ellipse(cx,cy,r.x,r.y,0,start,end,flipped);
+ };
+ if(!flipped){
+  context.moveTo(x+tl.x,y);context.lineTo(x+width-tr.x,y);ellipse(x+width-tr.x,y+tr.y,tr,-Math.PI/2,0);
+  context.lineTo(x+width,y+height-br.y);ellipse(x+width-br.x,y+height-br.y,br,0,Math.PI/2);
+  context.lineTo(x+bl.x,y+height);ellipse(x+bl.x,y+height-bl.y,bl,Math.PI/2,Math.PI);
+  context.lineTo(x,y+tl.y);ellipse(x+tl.x,y+tl.y,tl,Math.PI,Math.PI*1.5);
+ }else{
+  context.moveTo(x+tl.x,y);ellipse(x+tl.x,y+tl.y,tl,-Math.PI/2,-Math.PI);
+  context.lineTo(x,y+height-bl.y);ellipse(x+bl.x,y+height-bl.y,bl,Math.PI,Math.PI/2);
+  context.lineTo(x+width-br.x,y+height);ellipse(x+width-br.x,y+height-br.y,br,Math.PI/2,0);
+  context.lineTo(x+width,y+tr.y);ellipse(x+width-tr.x,y+tr.y,tr,0,-Math.PI/2);
+ }
+ context.closePath();context.moveTo(x+tl.x,y);
+}

package/lib/renderer/css-animations.js

@@ -0,0 +1,173 @@
+import {animationShorthand} from '../style/animation-values.js';
+import {extractAnimationKeyframes,parseTransform} from '../style/computed-style.js';
+
+const milliseconds = value => parseFloat(value) * (String(value).endsWith('ms') ? 1 : 1000);
+const properties = {width:'width',height:'height',opacity:'opacity'};
+
+// CSS animation timeline with numeric and compatible transform interpolation. Unsupported
+// visual value types keep their underlying style; lifecycle events still run.
+// No DOM style attributes are changed by sampling an animation.
+export function createCSSAnimations({invalidate,dispatch,now=()=>performance.now(),setTimer=setTimeout,clearTimer=clearTimeout}) {
+  let states=new Map(),definitions=new Map(),sources=null,environment='',timer=null;
+  const queued=new Set();
+  function emit(element,type,state,elapsed) {
+    const detail={animationName:state.config.name,elapsedTime:Math.max(0,elapsed)/1000,pseudoElement:''};
+    const task=setTimer(()=>{
+      queued.delete(task);
+      dispatch(element,type,detail);
+    },0);
+    queued.add(task);
+  }
+  function arm() {
+    if(timer!==null)return;
+    if(![...states.values()].some(list=>list.some(s=>!s.ended&&s.config.playState!=='paused')))return;
+    timer=setTimer(()=>{
+      timer=null;
+      for(const [element,list] of states) {
+        if(!element.isConnected){cancel(element,list);states.delete(element);continue;}
+        if(list.some(s=>!s.ended&&s.config.playState!=='paused'))invalidate(element);
+      }
+    },16);
+  }
+  function cancel(element,list) {
+    for(const state of list)if(state.started&&!state.ended)emit(element,'animationcancel',state,now()-state.start-state.delay);
+  }
+  return {
+    setSheets(sheets,viewport) {
+      for(const [element,list] of states)if(!element.isConnected){cancel(element,list);states.delete(element);}
+      const key=`${viewport.width}:${viewport.height}:${viewport.mobile}`;
+      if(sources===sheets&&environment===key)return;
+      sources=sheets;environment=key;definitions=new Map();
+      for(const sheet of sheets)for(const entry of extractAnimationKeyframes(sheet,viewport))definitions.set(...entry);
+    },
+    sample(element,style) {
+      if(style.display==='none')for(const [child,list] of states)if(child===element||element.contains?.(child)) {
+        cancel(child,list);states.delete(child);
+      }
+      if(!style.cssAnimations&&!style.cssAnimationLonghands&&!states.has(element))return style;
+      const longhands=style.cssAnimationLonghands??{};
+      const base=style.cssAnimations??animationShorthand('none');
+      const names=longhands.name??base.map(item=>item.name);
+      const configs=names.map((name,index)=>{
+        const config={...base[index%base.length],name};
+        for(const [key,values] of Object.entries(longhands))config[key]=values[index%values.length];
+        return config;
+      }).filter(config=>config.name!=='none'&&definitions.has(config.name)&&style.display!=='none');
+      const previous=states.get(element)??[],next=[];
+      let result=style;
+      const time=now();
+      for(let index=0;index<configs.length;index++) {
+        const config=configs[index],frames=definitions.get(config.name);
+        let state=previous[index];
+        // Timeline does not restart for duration/delay changes. Pause freezes
+        // local time; resume moves the origin instead of jumping ahead.
+        if(!state||state.config.name!==config.name) {
+          if(state)cancel(element,[state]);
+          state={config,start:time,started:false,ended:false,iteration:0};
+        }
+        if(state.config.playState!=='paused'&&config.playState==='paused')state.pausedAt=time;
+        else if(state.config.playState==='paused'&&config.playState!=='paused') {
+          state.start+=time-(state.pausedAt??time);state.pausedAt=null;
+        }
+        if(config.playState==='paused'&&state.pausedAt==null)state.pausedAt=time;
+        state.config=config;state.delay=milliseconds(config.delay)||0;
+        const duration=Math.max(0,milliseconds(config.duration)||0);
+        const count=config.iterationCount==='infinite'?Infinity:Math.max(0,Number(config.iterationCount)||0);
+        const total=duration===0?0:duration*count;
+        const elapsed=(state.pausedAt??time)-state.start-state.delay;
+        if(elapsed>=0&&!state.started){state.started=true;emit(element,'animationstart',state,Math.min(total,Math.max(0,-state.delay)));}
+        const finished=elapsed>=total;
+        const iteration=duration>0?Math.floor(Math.max(0,elapsed)/duration):0;
+        if(state.started&&!state.ended&&!finished&&iteration>state.iteration)emit(element,'animationiteration',state,iteration*duration);
+        state.iteration=iteration;
+        if(finished&&!state.ended&&state.started){state.ended=true;emit(element,'animationend',state,total);}
+        next.push(state);
+        if(elapsed<0&&!['both','backwards'].includes(config.fillMode))continue;
+        if(finished&&!['both','forwards'].includes(config.fillMode))continue;
+        let progress=elapsed<0?0:finished?(count%1||1):duration?elapsed/duration%1:1;
+        const cycle=finished?Math.max(0,Math.ceil(count)-1):iteration;
+        if(config.direction==='reverse'||config.direction==='alternate'&&cycle%2===1||config.direction==='alternate-reverse'&&cycle%2===0)progress=1-progress;
+
+        for(const [property,field] of Object.entries(properties)) {
+          const stops=frames.flatMap(frame=>{
+            const value=frame.declarations.get(property)?.value;
+            if(value==null)return [];
+            if(!/^-?(?:\d*\.)?\d+(?:px)?$/.test(value))return [];
+            if(property!=='opacity'&&!value.endsWith('px')&&Number(value)!==0)return [];
+            return [{offset:frame.offset,value:Number.parseFloat(value),timing:frame.declarations.get("animation-timing-function")?.value}];
+          });
+          if(!stops.length)continue;
+          if(stops[0].offset!==0&&typeof style[field]==='number')stops.unshift({offset:0,value:style[field]});
+          if(stops.at(-1).offset!==1&&typeof style[field]==='number')stops.push({offset:1,value:style[field]});
+          const left=stops.findLast(stop=>stop.offset<=progress)??stops[0];
+          const right=stops.find(stop=>stop.offset>=progress)??stops.at(-1);
+          const portion=ease(right.offset===left.offset?0:(progress-left.offset)/(right.offset-left.offset),left.timing??config.timingFunction);
+          if(result===style)result={...style};
+          result[field]=left.value+(right.value-left.value)*portion;
+        }
+        const transforms=frames.flatMap(frame=>{
+          const raw=frame.declarations.get('transform')?.value;
+          if(raw==null)return [];
+          const value=raw==='none'?null:parseTransform(raw,style);
+          return value===undefined?[]:[{offset:frame.offset,value,timing:frame.declarations.get('animation-timing-function')?.value}];
+        });
+        if(transforms.length){
+          if(transforms[0].offset!==0)transforms.unshift({offset:0,value:style.transform??null});
+          if(transforms.at(-1).offset!==1)transforms.push({offset:1,value:style.transform??null});
+          const left=transforms.findLast(stop=>stop.offset<=progress)??transforms[0];
+          const right=transforms.find(stop=>stop.offset>=progress)??transforms.at(-1);
+          const portion=ease(right.offset===left.offset?0:(progress-left.offset)/(right.offset-left.offset),left.timing??config.timingFunction);
+          const transform=interpolateTransform(left.value,right.value,portion);
+          if(transform!==undefined){if(result===style)result={...style};result.transform=transform;}
+        }
+      }
+      cancel(element,previous.slice(configs.length));
+      if(next.length)states.set(element,next);else states.delete(element);
+      arm();return result;
+    },
+    dispose() {
+      clearTimer(timer);timer=null;
+      for(const task of queued)clearTimer(task);
+      queued.clear();states.clear();definitions.clear();sources=null;
+    },
+  };
+}
+
+function ease(progress,name) {
+  if(progress<=0)return 0;
+  if(progress>=1)return 1;
+  if(name==='linear')return progress;
+  if(name==='step-start')return 1;
+  if(name==='step-end')return progress<1?0:1;
+  const presets={ease:[.25,.1,.25,1],'ease-in':[.42,0,1,1],'ease-out':[0,0,.58,1],'ease-in-out':[.42,0,.58,1]};
+  const curve=presets[name]??(/^cubic-bezier\(([^)]+)\)$/.exec(name)?.[1].split(',').map(Number));
+  if(!curve||curve.length!==4||!curve.every(Number.isFinite))return progress;
+  const [x1,y1,x2,y2]=curve;
+  const at=(t,a,b)=>3*(1-t)**2*t*a+3*(1-t)*t*t*b+t**3;
+  let low=0,high=1;
+  for(let n=0;n<16;n++){const middle=(low+high)/2;if(at(middle,x1,x2)<progress)low=middle;else high=middle;}
+  return at((low+high)/2,y1,y2);
+}
+
+// Keep percentages as symbolic lengths until layout knows the reference box.
+function mixLength(a,b,t){
+  if(typeof a==='number'&&typeof b==='number')return a+(b-a)*t;
+  return {unit:'math',kind:'sum',values:[{unit:'math',kind:'scale',value:a,factor:1-t},{unit:'math',kind:'scale',value:b,factor:t}]};
+}
+function interpolateTransform(a,b,t){
+  if(t===0)return a;if(t===1)return b;
+  if(!a&&!b)return null;
+  if(!a?.affine&&!b?.affine){
+    return {x:mixLength(a?.x??0,b?.x??0,t),y:mixLength(a?.y??0,b?.y??0,t),
+      scaleX:(a?.scaleX??1)+((b?.scaleX??1)-(a?.scaleX??1))*t,
+      scaleY:(a?.scaleY??1)+((b?.scaleY??1)-(a?.scaleY??1))*t};
+  }
+  const identity=op=>op.kind==='translate'?{kind:op.kind,x:0,y:0}:op.kind==='scale'?{kind:op.kind,x:1,y:1}:{kind:op.kind,angle:0};
+  const x=a?.affine?.operations??(!a?b.affine.operations.map(identity):null);
+  const y=b?.affine?.operations??(!b?a.affine.operations.map(identity):null);
+  if(!x||!y||x.length!==y.length||x.some((op,i)=>op.kind!==y[i].kind))return undefined;
+  const operations=x.map((op,i)=>op.kind==='translate'||op.kind==='scale'
+    ?{kind:op.kind,x:mixLength(op.x,y[i].x,t),y:mixLength(op.y,y[i].y,t)}
+    :{kind:op.kind,angle:op.angle+(y[i].angle-op.angle)*t});
+  return {x:0,y:0,affine:{operations}};
+}