css3 - Jaggies text when fillText in canvas in chrome -

i trying draw text in canvas drawn text has jaggies in chrome 31.0.1650. have tried -webkit-font-smoothing:antialiased,text-shadow go in vain.

how tackle problem? in advance.

here style code:

<style>     #my_canvas{                    -webkit-font-smoothing: antialiased;         text-shadow: 1px 1px 1px rgba(0,0,0,0.004);         text-indent: -9999px;      }                    </style> 

the code in body:

<canvas id="my_canvas" height="300" width="2200"></canvas> <script>     var canvas = document.getelementbyid("my_canvas");     var context = canvas.getcontext("2d");     context.imagesmoothingenabled =true;     context.fillstyle = "black";     context.font = "bold 100px arial";     context.filltext("a quick brown fox jumps on lazy dog", 50, 200); </script> 

this issue chrome text engine.

there technique can use around though:

• setup off-screen canvas double size of on-screen canvas
• draw text off-screen canvas in scale: font size , position
• draw off-screen canvas main canvas scaled down (half in case).

live demo here

the difference subtle (as expected) improves quality. here enlargement:

sidenotes: css not affect content of canvas, elements. image smoothing enabled default , affects images not text or shapes (we use though technique).

var scale = 2;  // scale x2.  var ocanvas = document.createelement('canvas'); var octx = ocanvas.getcontext('2d');  ocanvas.width = canvas.width * scale;   // set size of new canvas ocanvas.height = canvas.height * scale;  // draw text off-screen canvas instead @ double sizes octx.fillstyle = "black"; octx.font = "bold " + (100 * scale) + "px arial"; octx.filltext("a quick brown fox jumps on lazy dog", 50*scale, 200*scale);  // key step draw off-screen canvas main canvas context.drawimage(ocanvas, 0, 0, canvas.width, canvas.height); 

what happens introducing interpolation in mix here. chrome draw text rough off-screen canvas, after text becomes rasterized can deal image.

when draw canvas (aka image) our main canvas @ half size, interpolation (sub-sampling) kicks in , low-pass filter pixels giving smoother look.

it of course take more memory if result important small price pay nowadays.

you notice other values 2 doesn't work well. because canvas typically uses bi-linear interpolation rather bi-cubic (which allow use 4). think 2x serves in case.

why not using transform, ie. scale() ? chrome's text engine (or way it's used) not rasterize text @ 1x , transforms it. takes vectors, transforms them , then rasterize text give same result (ie. scale 0.5, draw double).