[whatwg] Canvas size and double buffering.

Nikita Popov privat at ni-po.com
Thu Feb 4 02:26:27 PST 2010


I tried to solve the aliasing problem in Firefox and found out, that it 
really isn't possible to get it right, if you set the width and height 
in CSS:
If you leave the css-width/height as it is when resizing the canvas, it 
will get blurred in Firefox. If you change it to 'auto' it won't resize 
correctly next time.
So the only possibility is to get sharp lines and correct sizing is to 
first set the css-width/height procentually in JavaScript, then set the 
canvas.width/height using getBoundingClientRect and than setting 
css-width/height to 'auto'. (Everything on every resize). Furthermore 
you have to add one Pixel to the width if it isn't dividable by 2, 
because Chrome would add a strange white line otherwise.

So here is how it looks: http://nikic.lima-city.de/canvastest2.html
Works in Firefox and Google Chrome.

Sorry for double post.



More information about the whatwg mailing list