var cv = document.getElementById('box');

var ctx = cv.getContext("2d");

​

// SVG is resolution independent. Canvas is not. We need to make our canvas High Resolution.

​

// lets get the resolution of our device.

var pixelRatio = window.devicePixelRatio || 1;

​

// lets scale the canvas and change its CSS width/height to make it high res.

cv.style.width = cv.width +'px';

cv.style.height = cv.height +'px';

cv.width *= pixelRatio;

cv.height *= pixelRatio;

​

// Now that its high res we need to compensate so our images can be drawn as normal, by scaling everything up by the pixelRatio.

ctx.setTransform(pixelRatio,0,0,pixelRatio,0,0);

​

​

// lets draw a box

ctx.strokeRect(20.5,20.5,80,80);

​

var ur = cv.toDataURL();

​

// result should look exactly like the canvas when using PNG (default)

var result = document.getElementById('result');

result.src=ur;

// we need to match the resolution of the canvas

result.style.width = cv.style.width;

result.style.height = cv.style.height;

​

​

​

​