ImageData scaling/size issue

I’m trying to make a simple pixel drawing utility, this is easy enough to emulate using rect() calls, but I want to edit the pixel data directly. The problem seems to be that for some reason my calls to drawingContext.putImageData only blit the image at half the size of the canvas. Is it possible some scaling is involved behind the scenes?

The image and sketch below illustrates the problem. I’m trying to draw yellow pixels where the mouse is held down. It seems to work but the image gets drawn at half the canvas size.

canvas

Well, doing this after canvas creation works :person_shrugging:

let canvas = document.getElementsByTagName("canvas")[0];
canvas.width = WIDTH;
canvas.height = HEIGHT;

I saw context._pixelDensity is set to 2 and is used in a bunch of places, but just changing it before creating the canvas didn’t seem to fix it, I didn’t look very closely though.

1 Like