demo · v134

Houdini upscale comparator

The Houdini Paint API’s explainer always cited resolution-independent backgrounds as a flagship use case — paint a small source bitmap, let the worklet scale it across whatever box the layout assigns. Pre-Chrome 134 the worklet had no way to choose between fast pixelated scaling and pretty bilinear/bicubic. imageSmoothingQuality now exists in the worklet — pick a quality below and watch the same paint() call produce three different upscales.

probing CSS Paint worklet + imageSmoothingQuality…
The Paint Worklet only exists in Chromium-based browsers; the smoothing-quality plumbing is new in 134. If the worklet doesn’t register, the three boxes fall back to a normal <canvas> demonstration that still drives the three quality levels.

Pick a source resolution

low

— ms paint

medium

— ms paint

high

— ms paint

The code

// worklet.js
registerPaint('upscaled-logo', class {
  static get inputProperties() { return ['--quality']; }
  paint(ctx, size, props) {
    ctx.imageSmoothingQuality = props.get('--quality').toString().trim();  // NEW in 134
    ctx.imageSmoothingEnabled = true;
    ctx.drawImage(sourceBitmap, 0, 0, size.width, size.height);
  }
});

// main.js
CSS.paintWorklet.addModule('/worklet.js');

see also