Menu
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.
869
In short, the canvas and WebGL are more performant than the DOM, and with third-party libraries, its ease-of-use is comparable; furthermore, growing browser support for additional web standards have the potential to further boost canvas performance.
SVG gives better performance with smaller number of objects or larger surface. Canvas gives better performance with smaller surface or larger number of objects. SVG can be modified through script and CSS. Canvas can be modified through script only.
Canvas would be better for faster things and heavy bitmap manipulation (like animation), but will take more code if you want lots of interactivity. I've run a bunch of numbers on HTML DIV-made drawing versus Canvas-made drawing.
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
58
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
