This might save you an hour wondering why in the world does the canvas look fuzzy!?!
First, make your canvas element twice as large as you want it, but set it's width and height styles to the target size. For example, if you want a canvas element to be 500 points wide by 375 points high, you would do this:
canvas = document.getElementById('output') canvas.width = 1000; canvas.height = 750; canvas.style.width = "500px"; canvas.style.height = "375px";
If you look at your canvas now, it will look very tiny (half the size to be exact). That's because the canvas drawing context is drawing at normal scale and retina is double that. So you just have to scale the drawing context by 2 times:
BOOM. Pretty canvas.