Skip to content

Instantly share code, notes, and snippets.

@bryanbuchanan
Last active December 16, 2015 10:59
Show Gist options
  • Save bryanbuchanan/5424480 to your computer and use it in GitHub Desktop.
Save bryanbuchanan/5424480 to your computer and use it in GitHub Desktop.
Makes HTML5 canvas elements support @2x displays by doubling their size, then scaling them down to 50%. Requires jQuery.
// Function
function retinaCanvas($canvas, context) {
$canvas.each(function() {
$(this).prop({
width: $(this).width() * 2,
height: $(this).height() * 2
});
context.scale(2,2);
});
}
// Usage
var $canvas = $('canvas'); // Define canvas element
var context = $canvas[0].getContext('2d'); // Define context
retinaCanvas($canvas, context); // Make @2x compliant
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment