Drawn pixel using pencil on canvas is not centred

[nilesh9836]

Topic

I am drawing pixels using a pencil on canvas using p5.js. The issue is that when the pencil size is 1 and canvas is Zoomed IN in that scenario, its position is not centered. It's coming left sometime right not centered. I've noticed an interesting observation in our code. It appears that when the mouse's x and y positions are close to .5, the drawn pixel appears centered, So I have query that I want to know how image.set() method work internally , like did it accept Floating value too?

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[Vishal2002]

Hey @nilesh9836 can you share some code or screenshot for better understanding.Are you talking about following thing.

let img;
let zoom = 2;

function setup() {
createCanvas(400, 400);
img = createImage(400, 400);
}

function draw() {
background(220);

let px = floor(mouseX / zoom);
let py = floor(mouseY / zoom);

img.set(px, py, color(255, 0, 0));

img.updatePixels();

image(img, 0, 0, width * zoom, height * zoom);
}

[nilesh9836]

Yes @Vishal2002 here is the link for my sample app.

[limzykenneth]

@nilesh9836 I'm not quite sure what you mean here and if possible, a screenshot will likely be very helpful. There are subpixel drawing in native HTML canvas and by extension in p5.js and its behaviour may or may not be what you want, if the idea is to avoid subpixel drawing, rounding or flooring the numerical value passed to positional arguments can help.