How do I fix blurry text in my HTML5 canvas?

Solution 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!

Solution 2:

Solved!

I decided to see what changing the width and height attributes I set in javascript to see how that affected the canvas size -- and it didn't. It changes the resolution.

To get the result I wanted, I also had to set the canvas.style.width attribute, which changes the physical size of the canvas:

canvas.width=1000;//horizontal resolution (?) - increase for better looking text
canvas.height=500;//vertical resolution (?) - increase for better looking text
canvas.style.width=width;//actual width of canvas
canvas.style.height=height;//actual height of canvas

Solution 3:

While @MyNameIsKo's answer still works, it is a little outdated now in 2020, and can be improved:

function createHiPPICanvas(w, h) {
    let ratio = window.devicePixelRatio;
    let cv = document.createElement("canvas");
    cv.width = w * ratio;
    cv.height = h * ratio;
    cv.style.width = w + "px";
    cv.style.height = h + "px";
    cv.getContext("2d").scale(ratio, ratio);
    return cv;
}

In general, we make the following improvements:

• We remove the backingStorePixelRatio references, as these aren't really implemented in any browser in any important way (in fact, only Safari returns something other than undefined, and this version still works perfectly in Safari);
• We replace all of that ratio code with window.devicePixelRatio, which has fantastic support
• This also means that we declare one less global property --- hooray!!
• We can also remove the || 1 fallback on window.devicePixelRatio, as it is pointless: all browsers that don't support this property don't support .setTransform or .scale either, so this function won't work on them, fallback or not;
• We can replace .setTransform by .scale, as passing in a width and height is a little more intuitive than passing in a transformation matrix.
• The function has been renamed from createHiDPICanvas to createHiPPICanvas. As @MyNameIsKo themselves mention in their answer's comments, DPI (Dots per Inch) is printing terminology (as printers make up images out of tiny dots of coloured ink). While similar, monitors display images using pixels, and as such PPI (Pixels per Inch) is a better acronym for our use case.

One large benefit of these simplifications is that this answer can now be used in TypeScript without // @ts-ignore (as TS doesn't have types for backingStorePixelRatio).

Solution 4:

This 100% solved it for me:

var canvas = document.getElementById('canvas');
canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;

(it is close to Adam Mańkowski's solution).

Solution 5:

I resize canvas element via css to take whole width of parent element. I noticed that width and height of my element is not scaled. I was looking for best way to set size which should be.

canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

This simple way your canvas will be set perfectly, no matter what screen you will use.