Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Why doesn't the image in this example scale to fill the canvas?
<title>Canvas Lab</title>
body {
background-color: whitesmoke;
.divPage {
margin-top: 125px;
width: 800px;
margin-left: auto; margin-right: auto;
.cardCanvas {
width: 800px;
height: 500px;
border: 1px solid gainsboro;
function setupCanvas (urlImg) {
var c = document.getElementById ("idCardCanvas");
var ctx = c.getContext ("2d");
var img = new Image ();
img.onload = function () {
ctx.drawImage (img, 0, 0, img.width, img.height, 0, 0, 800, 500)
img.src = urlImg;
<div class="divPage">
<canvas class="cardCanvas" id="idCardCanvas">
setupCanvas ("");

This comment has been minimized.

Copy link

serd commented Jun 29, 2014

Add this after line 24:

var canvas = document.getElementById('idCardCanvas');
canvas.width = 800;
canvas.height = 500;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.