How to get crisp text and lines on canvas without antialiasing

• Introduction
• The tl;dr read bit
• An example canvas tag
• Conclusion

Introduction

For a long time now - pretty much since I started using it over 15 years ago - the <canvas> tag has not been great at rendering text. It looks blurry, pixelated and when zoomed it just gets worse. Well now I've learnt a new technique for working with <canvas> that makes text look much better. Here's an image of a close up of some text rendered using the standard way and then the new way that I showed on a recent blog post:

Clearly much better - much sharper and less blurry.

The tl;dr bit

Increase the resolution of your <canvas> by increasing the width and height HTML attributes whilst keeping the same physical dimensions by setting the CSS style width and height to the dimensions that you want the <canvas> to appear on the page as.

An example canvas tag

Here's what two <canvas> tags look like - one before it's been altered and one after:

<div style="text-align: center">
    <canvas id="cvs1" width="500" height="50" style="border: 1px solid gray">[No canvas support]</canvas>
</div>

<script>
    canvas  = document.getElementById('cvs1');
    context = canvas.getContext('2d');
    
    context.font = '16pt Arial';
    context.textBaseline = 'middle';
    context.fillText('The quick brown fox jumped over the lazy dog!',30,25);
</script>

<div style="text-align: center">
    <canvas id="cvs2" width="1000" height="100" style="width: 500px; height: 50px; border: 1px solid gray">[No canvas support]</canvas>
</div>

<script>
    canvas  = document.getElementById('cvs2');
    context = canvas.getContext('2d');
    
    context.font = '32pt Arial';
    context.textBaseline = 'middle';
    context.fillText('The quick brown fox jumped over the lazy dog!', 60, 50);
</script>

Conclusion

As you can see - much crisper and less blurry. There are caveats though - the main one is that the pixel space has been doubled - even though the <canvas> tag appears to be the same size. So, as you can see in the above example, the X and Y coordinates that the text is placed at have been doubled and also the size of the text (32pt for the second <canvas> versus 16pt for the first). Other dimensions and coordinates may have to be doubled as well.

Something that I didn't expect to see was smoother animations and effects. This I'm not 100% sure is a real thing - it may just be in my head! But you'll be able to tell for yourself soon enough though.

At the time of writing, I'm converting the RGraph libraries to this new way of working. It's going well so expect version 7.00 of RGraph soon - either the end of the month or early August.