var width = 500,
    height = 70,
    font = '18px serif'

function getRetinaRatio() {
    var devicePixelRatio = window.devicePixelRatio || 1
    var c = document.createElement('canvas').getContext('2d')
    var backingStoreRatio = [
        c.webkitBackingStorePixelRatio,
        c.mozBackingStorePixelRatio,
        c.msBackingStorePixelRatio,
        c.oBackingStorePixelRatio,
        c.backingStorePixelRatio,
        1
    ].reduce(function(a, b) { return a || b })

    return devicePixelRatio / backingStoreRatio
}

var ratio = getRetinaRatio()
var scaledWidth = width * ratio
var scaledHeight = height * ratio

var blurredCanvas = d3.select('body').append('canvas')
    .attr('width', scaledWidth / 2)
    .attr('height', scaledHeight / 2)
    .style('width', width + 'px')
    .style('height', height + 'px')
var goodCanvas = d3.select('body').append('canvas')
    .attr('width', scaledWidth)
    .attr('height', scaledHeight)
    .style('width', width + 'px')
    .style('height', height + 'px')

var blurredContext = blurredCanvas.node().getContext('2d')
blurredContext.scale(ratio / 2, ratio / 2)
blurredContext.font = font
blurredContext.fillText("Half of native scale. Blurred image.", 10, 20)
blurredContext.fillText("This happens when you forget about retina screens.", 10, 45)

var goodContext = goodCanvas.node().getContext('2d')
goodContext.scale(ratio, ratio)
goodContext.font = font
goodContext.fillText("Native scale. Exact pixel match.", 10, 20)
goodContext.fillText("Show some respect to users, scale your canvas!", 10, 45)