How do I fix blurry text in my HTML5 canvas?

Question

I am a total n00b with HTML5 and am working with the canvas to render shapes, colors, and text. In my app, I have a view adapter that creates a canvas dynamically, and fills it with content. This works really nicely, except that my text is rendered very fuzzy/blurry/stretched. I have seen a lot of other posts on why defining the width and height in CSS will cause this issue, but I define it all in javascript.

The relevant code (view Fiddle):

var width  = 500;//FIXME:size.w; var height = 500;//FIXME:size.h;      var canvas = document.createElement("canvas"); //canvas.className="singleUserCanvas"; canvas.width=width; canvas.height=height; canvas.border = "3px solid #999999"; canvas.bgcolor = "#999999"; canvas.margin = "(0, 2%, 0, 2%)";      var context = canvas.getContext("2d");  ////////////////// ////  SHAPES  //// //////////////////      var left = 0;  //draw zone 1 rect context.fillStyle = "#8bacbe"; context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);  left = left + canvas.width*1.5/8.5;  //draw zone 2 rect context.fillStyle = "#ffe381"; context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);  left = left + canvas.width*2.75/8.5 + 1;  //draw zone 3 rect context.fillStyle = "#fbbd36"; context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);  left = left + canvas.width*1.25/8.5;  //draw target zone rect context.fillStyle = "#004880"; context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);  left = left + canvas.width*0.25/8.5;      //draw zone 4 rect context.fillStyle = "#f8961d"; context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);  left = left + canvas.width*1.25/8.5 + 1;  //draw zone 5 rect context.fillStyle = "#8a1002"; context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);  //////////////// ////  TEXT  //// ////////////////  //user name context.fillStyle = "black"; context.font = "bold 18px sans-serif"; context.textAlign = 'right'; context.fillText("User Name", canvas.width, canvas.height*.05);  //AT: context.font = "bold 12px sans-serif"; context.fillText("AT: 140", canvas.width, canvas.height*.1);  //AB: context.fillText("AB: 94", canvas.width, canvas.height*.15);         //this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout. var parent = document.getElementById("layout-content"); parent.appendChild(canvas);

<div id="layout-content"></div>

The results I am seeing (in Safari) are much more skewed than shown in the Fiddle:

Mine

Fiddle

What am I doing incorrectly? Do I need a separate canvas for each text element? Is it the font? Am I required to first define the canvas in the HTML5 layout? Is there a typo? I am lost.

Answer 1

The canvas element runs independent from the device or monitor's pixel ratio.

On the iPad 3+, this ratio is 2. This essentially means that your 1000px width canvas would now need to fill 2000px to match it's stated width on the iPad display. Fortunately for us, this is done automatically by the browser. On the other hand, this is also the reason why you see less definition on images and canvas elements that were made to directly fit their visible area. Because your canvas only knows how to fill 1000px but is asked to draw to 2000px, the browser must now intelligently fill in the blanks between pixels to display the element at its proper size.

I would highly recommend you read this article from HTML5Rocks which explains in more detail how to create high definition elements.

tl;dr? Here is an example (based on the above tut) that I use in my own projects to spit out a canvas with the proper resolution:

var PIXEL_RATIO = (function () {     var ctx = document.createElement("canvas").getContext("2d"),         dpr = window.devicePixelRatio || 1,         bsr = ctx.webkitBackingStorePixelRatio ||               ctx.mozBackingStorePixelRatio ||               ctx.msBackingStorePixelRatio ||               ctx.oBackingStorePixelRatio ||               ctx.backingStorePixelRatio || 1;      return dpr / bsr; })();   createHiDPICanvas = function(w, h, ratio) {     if (!ratio) { ratio = PIXEL_RATIO; }     var can = document.createElement("canvas");     can.width = w * ratio;     can.height = h * ratio;     can.style.width = w + "px";     can.style.height = h + "px";     can.getContext("2d").setTransform(ratio, 0, 0, ratio, 0, 0);     return can; }  //Create canvas with the device resolution. var myCanvas = createHiDPICanvas(500, 250);  //Create canvas with a custom resolution. var myCustomCanvas = createHiDPICanvas(500, 200, 4); 

Hope this helps!