v134 · miscellaneous

Support ImageSmoothingQuality in PaintCanvas

Add support for the imageSmoothingQuality attribute on Paint Canvas. It allows a web developer to choose the quality/performance tradeoff when scaling images. There are 3 options in total for imageSmoothingQuality: low, medium and high. Chrome platform status entry for its launch on Canvas 2D: https://chromestatus.com/feature/4717415682277376

concepts

  1. PaintCanvas Smoothing

    imageSmoothingQuality applies inside Paint API canvases. Houdini paint worklets get the same scaling controls.

  2. Houdini upscale comparator

    Paint API’s flagship case: resolution-independent backgrounds. Three boxes, three quality levels, live source-size + box-size sliders.

  3. Diff Magnifier

    Same source, three quality levels, pixel-diff magnified 5x so you see exactly where the kernel picks up extra samples.

  4. Thumbnail Processor

    Process a procedural source image to thumbnails at low/medium/high quality. Adjust width, height, and scale ratio. Render timing shows the cost difference between quality levels.

why it shipped

ImageSmoothingQuality has launched in both Canvas 2D and OffscreenCanvas back in 2016. Per PaintCanvas Spec ( https://drafts.css-houdini.org/css-paint-api-1/#paintrenderingcontext2d), this property is supposed to be launched in Paint Canvas as well. This helps PaintCanvas API to catch up with Canvas 2D API.

references