W3C home > Mailing lists > Public > whatwg@whatwg.org > February 2010

[whatwg] Canvas size and double buffering.

From: Nikita Popov <privat@ni-po.com>
Date: Thu, 04 Feb 2010 11:26:27 +0100
Message-ID: <4B6AA0D3.6020609@ni-po.com>
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.
Received on Thursday, 4 February 2010 02:26:27 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:20 UTC