Create a gist now

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?
<html>
<head>
<title>Canvas Lab</title>
<style>
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;
}
</style>
<script>
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;
}
</script>
</head>
<body>
<div class="divPage">
<canvas class="cardCanvas" id="idCardCanvas">
</canvas>
</div>
<script>
setupCanvas ("http://static.scripting.com/larryKing/images/2014/04/30/nashville.jpg");
</script>
</body>
</html>

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