🏠 back to Observable

For some reason my thumbnail size is all wrong?

The canvas should have a width equal to the whole image, but it’s half width and height for some reason?

image

The canvas seems to have wrong scaling behavior on my mobile phone too

1 Like

When you create a canvas context via DOM.context2d() and leave out the third argument, it will scale the canvas to whatever the current devicePixelRatio is (by setting both a style and applying a canvas transform).

Your use of putImageData() is not affected by any transforms and thus will only use the unscaled dimensions.
You can work around that by either passing “1” (e.g. DOM.context2d(w, h, 1)) or by using ctx.canvas.width and ctx.canvas.height in your pixel operations.

3 Likes

reminds me I had a color version lying around too!
now published at https://observablehq.com/@fil/linde-buzo-gray-rgb-color-stippling

2 Likes

Somewhat related, here are some random pixel sampling experiments:

4 Likes

Cool! I’ll link to your notebook too :slight_smile: