Getting rid of Chart.js canvas subpixels

Question

I'm working on a really small widget which displays a simple bar chart:

I'm using Chart.js for that specific task.

            var canvas = this.$(".chart-canvas")[0];

            if (canvas) {
                var ctx = canvas.getContext("2d");

                ctx.translate(0.5, 0.5);

                window.barChart = new Chart(ctx).Bar(barChartData, {
                    responsive: true,
                    maintainAspectRatio: false,
                    showScale: false,
                    scaleShowGridLines: false,
                    scaleGridLineWidth: 0,
                    barValueSpacing: 1,
                    barDatasetSpacing: 0,
                    showXAxisLabel: false,
                    barShowStroke: false,
                    showTooltips: false,
                    animation: false
                });

As you can see, I've tried

ctx.translate(0.5, 0.5);

but that didn't really help.

Is there any way to get rid of the subpixel rendering? I've read about Bresenham's line algorithm, but don't know how to implement it there.

Any ideas/suggestions appreciated.

Thank you in advance!

Answer 1

Assuming you have only one color, you can do this by extending the chart and overriding the draw to do a getImageData, "rounding" (if the pixel has a R, G or B value, set it to the color) the pixel colors and a putImageData.

You could do this for multiple colors too but it becomes a tad complicated when there are two colors close by.

---

However the difference in bar value spacing you are seeing is because of the way Chart.js calculates the x position for the bars - there's a rounding off that happens.

You can extend the chart and override the method that calculates the x position to get rid of the rounding off

Chart.types.Bar.extend({
    // Passing in a name registers this chart in the Chart namespace in the same way
    name: "BarAlt",
    initialize: function (data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);

        // copy paste from library code with only 1 line changed
        this.scale.calculateX = function (index) {
            var isRotated = (this.xLabelRotation > 0),
                innerWidth = this.width - (this.xScalePaddingLeft + this.xScalePaddingRight),
                valueWidth = innerWidth / Math.max((this.valuesCount - ((this.offsetGridLines) ? 0 : 1)), 1),
                valueOffset = (valueWidth * index) + this.xScalePaddingLeft;

            if (this.offsetGridLines) {
                valueOffset += (valueWidth / 2);
            }

            // the library code rounds this off - we don't
            return valueOffset;
        }

        // render again because the original initialize call does a render
        // when animation is off this is the only render that happens
        this.render();
    }
});

You'd call it like so

var ctx = document.getElementById('canvas').getContext('2d');
var myBarChart = new Chart(ctx).BarAlt(data, {
     ...

---

Fiddle - http://jsfiddle.net/gf2c4ue4/

You can see the difference better if you zoom in.

---

The top one is the extended chart