Quantcast
Channel: MSDN Blogs
Viewing all articles
Browse latest Browse all 35736

Differences in font smoothing on HTML5 Canvas

$
0
0

I'm not a font expert, nor am I an expert in any kind of font-smoothing. I do, for better or worse, have an eye for fonts that aren't smoothed and just look out of place. It was a surprise to me to see how differently various browsers render text in the HTML5 Canvas element. Some browsers do better than others and some just do a terrible job.

Now, there may be a way to force the mechanism of font-smoothing for each browser but in the little time I spent browsing for a solution I couldn't find anything substantial. For each of the results below the canvas was not scaled in any way and a custom font was used. All rendering was done on Windows 8 RC Build 8400.

JavaScript code:

function Draw() {
    var canvas = document.getElementById("output");
    var dc = canvas.getContext('2d');
    dc.font = "48pt SweetlyBroken";
    dc.fillStyle = "black";
    dc.fillText("does font smoothing work?", 10, 100);
}

Results

Internet Explorer (10.0.8400.0):
Google Chrome (19.0.1084.56):
Mozilla Firefox (13.0.1):
Apple Safari (5.1.7 (7534.57.2)):
 

If anyone knows how to force font-smoothing on different browsers, please leave a comment below.


Viewing all articles
Browse latest Browse all 35736

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>