HOWTO: Get crisp lines on your canvas tag

• Introduction
• The original style of chart
• The old style antalias fix
• The up-to-date antialias fix

Introduction

By default HTML5 canvas antialiases (smooths) lines that you draw and this can make them appear to be thicker than they really are. You can avoid this if you prefer and get crisp lines by using the techniques described here. The offsetting method was used by RGraph for many years and just involves a simple translation before you start drawing. The second, more recent method, involves doubling the size of the pixel space and using CSS to size the canvas to the desired dimensions. This produces superb results, but does mean that you will probably have to account for it when if you do any additional drawing after your chart is drawn.

The original style of chart

This chart is drawn without any antialiasing fix and it allows you to see the state of the canvas drawing without any offsetting or scaling in effect.

<canvas id="cvs1" width="700" height="300">[No canvas support]</canvas>

<script>
    bar = new RGraph.Bar({
        id: 'cvs1',
        data: [4,8,6,5,5,3,1],
        options: {
            scale: false,
            marginTop: 50,
            textSize: 16,
            titleSize: 20,
            marginInner: 25,
            title: 'A chart with no antialiasing fix',
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        }
    }).draw();
</script>

The old-style antalias fix

And here is the chart after the former antialias fix has been applied. This involved translating the canvas by half a pixel in both the horizontal and vertical directions. As you can see it provides reasonable results, however the text on the chart is still a little thicker and blurrier than it should be.

<canvas id="cvs2" width="700" height="300">[No canvas support]</canvas>

<script>
    bar = new RGraph.Bar({
        id: 'cvs2',
        data: [4,8,6,5,5,3,1],
        options: {
            events: {
                beforedraw: function (obj)
                {
                    obj.context.translate(0.5, 0.5);
                }
            },
            scale: false,
            marginTop: 50,
            textSize: 16,
            titleSize: 20,
            marginInner: 25,
            title: 'A chart with the old-style antialiasing fix',
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        }
    }).draw();
</script>

The up-to-date antialias fix

This is a chart that uses the up-to-date method that RGraph uses to get rid of antialiasing. It involves increasing the canvas HTML dimensions and then using the CSS width and height to set the desired dimensions of the chart. The resulting chart looks much better and the lines (and the text) are crisper. Also, with animations they look a little smoother.

<canvas id="cvs3" width="700" height="300">[No canvas support]</canvas>

<script>
    bar = new RGraph.Bar({
        id: 'cvs3',
        data: [4,8,6,5,5,3,1],
        options: {
            marginTop: 50,
            textSize: 16,
            titleSize: 20,
            marginInner: 25,
            title: 'A chart with the up-to-date antialiasing fix',
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
        }
    }).draw();
</script>

As you can see, the canvas tag looks no different - and it isn't! This is because RGraph will apply the scaling fix automatically and you don't have to worry about anything. Here's what the scaled canvas tag really looks like after it's been modified. You can see that the width/height HTML attributes have been doubled and there is now a style attribute which has width/height properties that stipulate the desired dimensions.

<canvas id="cvs" width="1400" height="600" style="width: 700px; height: 300px">[No canvas support]</canvas>