javascript - Bad quality for 100% both width and height of canvas -
i have done tiny example canvas, it's available on jsfiddle:
<!doctype html> <html> <head> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } #mycanvas { width: 100%; height: 100%; display: block; } </style> </head> <body> <canvas id="mycanvas"> browser not support html5 canvas tag. </canvas> <script> var canvas = document.getelementbyid( "mycanvas" ); var context = canvas.getcontext( "2d" ); context.id = "mycontext"; context.beginpath(); context.arc( 95, 50, 40, 0, 2 * math.pi ); context.stroke(); settimeout( function() { var rectwidth = 150; var rectheight = 75; context.fillstyle = "blue"; context.fillrect( rectwidth / -2, rectheight / -2, rectwidth, rectheight ); }, 2000 ); </script> </body> </html> as able see, rendering result has low quality:
so, i'm wondering, how can draw various figures using canvas in quality, don't want draw in small size, want draw in 100% size of page.
so, maybe didn't define anti aliasing filter or else?
thanks!
problem
in general cases should avoid using css set canvas size.
the default size of canvas 300 x 150 pixels (bitmap). if set size using css we'll end scaling 300 x 150 pixels meaning browser start interpolating , smoothing image, why end blurry result.
solution
remove these css-rule:
#mycanvas { /*width: 100%; height: 100%;*/ display: block; } and set size in javascript this:
var canvas = document.getelementbyid( "mycanvas" ); canvas.width = window.innerwidth; // equals window dimension canvas.height = window.innerheight; you can of course set other size need (in pixels). want define position (i.e. fixed or absolute) canvas' css if goal full window size.
hope helps.
Comments
Post a Comment