863D3 canvas and Retina screens

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

via http://bl.ocks.org/devgru/a9428ebd6e11353785f2

809Measuring Text in Canvas

HTML Canvas allows for the drawing of text with

ctx.fillStyle = "666";      // text color
ctx.textAlign = "center";       // alignment
ctx.font = "normal 12px Helvetica Neue";        // font
ctx.fillText("my Text, x , y);      // draw

Sometimes, you might want to draw a border around the text. Getting the textHeight should not present a problem, after all we can set the font size directly. But textWidth is not fixed in that way, because it depends (nnnn) on the actual text that is being displayed.

ctx.measureText takes the text as an argument and returns an object with a width property, describing the width of the text.

var texttWidth = ctx.measureText(columnName).width;

width is for now the only inhabitant of that object, but it would be a fair guess, that it might be more densely populate in the future.

693Changing the Cursor with Events when dragging an HTML5 canvas

With jQuery document ready:

$(function(){
    var canvas = $('#testCanvas')[0];
    canvas.addEventListener('mousedown', function(e){
        e.preventDefault();
        e.stopPropagation();
        e.target.style.cursor = 'move';
    }, false);
    canvas.addEventListener('mouseup', function(e){
        e.target.style.cursor = 'default';
    }, false);
});

And without...

$('#testCanvas')[0].addEventListener('mousedown', function(e){
    e.preventDefault();
    e.stopPropagation();
    e.target.style.cursor = 'move';
}, false);

$('#testCanvas')[0].addEventListener('mouseup', function(e) {
    e.target.style.cursor = 'default';
}, false);

Based on this: http://stackoverflow.com/questions/2659999/html5-canvas-hand-cursor-problems