HTML5 Canvas avoid any subpixel rendering

问题:

As seen here. I have been having a few issues with sub pixel precision in the canvas. Now I'm having even more. I'm trying to render hard edged isometric squares as shown in the image in the link I provided. In an attempt to later work through the pixel data in the rendered image and extract the present colors.

But because of the sub pixel issue im having I'm receiving colors that aren't actually present in the original image! And no matter where i seem to start drawing the line you see in the image (whether it be at from [1,1] to [10,10] or [1.5, 1.5] to [10.5, 10.5], this is just an example) I am always getting these sub pixel colors that are ruining my results!

Does anyone know how I can avoid this or suggest the correct way I should draw a pseudo-isometric line (pseudo as in pixel art isometric angles) So I have nice hard edges on my shapes and I'm not ruining the rendered image with any sort of sub-pixel garbage.

回答1:

Well after some exhaustive research there seems to be no standardized way to stop what I'm experiencing.

Which is anti-aliasing that depending on the browser can only be enabled or disabled for certain drawing operations.

There are a few tricks on how to avoid anti-aliasing in some situations in this stack overflow question: Can I turn off antialiasing on an HTML <canvas> element?

But the only one that will work for me is to manually implement my own drawing functions to produce the shapes I want without any anti-aliasing. This will be done with the canvas putImageData function and there is a good tutorial right here on ways of using this.

For the time being there is no api supported solution for the problem