Translate + Canvas = Blurry Text

How do I fix blurry text in my HTML5 canvas?

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);

HTML5 Canvas translate(0.5,0.5) not fixing line blurryness

Retina & HiDPI devices

Looking at the image you supplied. The canvas is half the resolution of the display. Zoom in and look at the pixels on the "X", The DOM line is 1px yet still twice a wide as the pixels on that letter. That means the canvas is being stretched and the blur is due to the bilinear filtering. Either you are zoomed out on the tab or you have a retina or HiDPI display. Set the canvas.width & canvas.height to twice what it is, set the canvas.style.width & canvas.style.height to DOM pixels. Remove the ctx.translate and add ctx.scale(2,2) and all things will be clear.

A zoom in on the image

Canvas drawings, like lines, are blurry

When drawing lines in canvas, you actually need to straddle the pixels. It was a bizarre choice in the API in my opinion, but easy to work with:

Instead of this:

context.moveTo(10, 0);
context.lineTo(10, 30);

Do this:

context.moveTo(10.5, 0);
context.lineTo(10.5, 30);

Dive into HTML5's canvas chapter talks about this nicely

JavaScript either strokeRect or fillRect blurry depending on translation

Strokes draw half-inside & half-outside the x,y coordinates. That's why you are seeing the blur with integer x,y and why it clears up when the x,y are offset by a half pixel. Here's more on why the blur occurs: http://www.mobtowers.com/html5-canvas-crisp-lines-every-time/

An easy way to make rects crisper is to add methods to your context instance that offset strokeRect & fillRect for best appearance:

var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");var cw=canvas.width;var ch=canvas.height;
// add pixel aligned versions of strokeRect & fillRect to this context instancecontext.sRect=function(x,y,w,h){  x=parseInt(x)+0.50;  y=parseInt(y)+0.50;  this.strokeRect(x,y,w,h);}context.fRect=function(x,y,w,h){  x=parseInt(x);  y=parseInt(y);  context.fillRect(x,y,w,h);}
context.strokeStyle = "#000000";context.fillStyle = "#000000";
context.strokeRect(100, 50, 100, 100);context.fillRect(300.5, 50.5, 100, 100);

context.sRect(100,200,100,100);context.fRect(300.5,200,100,100);
context.fillText('Unadjusted',20,100);context.fillText('Adjusted',20,250);

body{ background-color: ivory; padding:10px; }#canvas{border:1px solid red;}

<canvas id="canvas" width=500 height=500></canvas>

---

Related Topics