why is my native HTML5 canvas blurry?

Hi Folks,

Been working with the WebCanvas, but it really should have been a custom control for this particular project. So I am working on that and making good progress. Unfortunately the drawing that I do in javascript looks like it’s got anti-aliasing turned on, where the drawing that Xojo does looks nice and sharp. Is there a javascript command to turn that off that I’m not seeing?

ha, never mind :wink: I’m not used to working with Javascript in any detail and my offset calculations were actually floats instead of nice clean integers. This was causing the locations to be decimals and the canvas drawing code was dutifully doing inter pixel math to draw it. I added Math.floor() around them and they now look great. With a little more math to account for offsets that are not pixel perfect anymore.

Now to figure out why the text I draw still looks anti-aliased and blurry even after fixing the offsets to make sure they were integers…

and the answer to the text blurry question is in too. I was using a style to provide the dark grey background to the canvas. as soon as I filled the canvas with the same color as a drawing command the text looked fine. Evidently it didn’t take the background color into account when anti-aliasing the text if the color was coming from the CSS for the entire canvas rather than knowing about it in it’s own context.

Not directly Xojo related, but if you’re making your own custom web controls this is important to know.