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.