image-rendering

Using nearest-neighbor with CSS zoom on canvas (and img)

六月ゝ 毕业季﹏ 提交于 2019-11-27 17:18:06
问题 When using the CSS zoom property, how can I convince the browser to use "nearest neighbor", instead of "bilinear" or any other more advanced zooming algorithms? My setup is a div that contains a canvas, and the div gets its zoom set via JavaScript to be <div style="zoom:3200%">...</div> and to get nearest neighbor, I am using image-rendering: -webkit-optimize-contrast in my CSS. The app is available here ('z' zooms in, 'shift-z' zooms back out), and my css is here Here is the desired effect