title: HTML5 Canvas avoid any subpixel rendering
body: <p>As seen <a href="https://stackoverflow.com/questions/7017998/html-5-canvas-avoid-fill-behaviour-on-overlap">here.</a> 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.</p>
  
  <p><img src="https://i.stack.imgur.com/htihJ.png" alt="Sub Pixel"></p>
  
  <p>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!</p>
  
  <p>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.</p>