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.

Reply via email to