Canvas only saves part of image and stretches it out weirdly

Question

I've successfully managed to work with canvases before, but the same code I've used before is suddenly only drawing part of the image.

Fiddle here.

HTML:

<canvas id="card-texture-canvas"></canvas>
<img src="http://i.imgur.com/VaN8wBY.png" id="background">
<button class="save">Save</button>

JS:

$('.save').click(function () {
    var d_canvas = document.getElementById('card-texture-canvas')
    var context = d_canvas.getContext('2d')
    var background = document.getElementById('background')
    context.drawImage(background, 0, 0)
    $('#background').hide()
})

And with CSS I force it to be the correct width and height:

#card-texture-canvas {
    height: 297px;
    width: 200px;
}

But the drawing of the image completely disregards that and instead saves the top-right part of the image, stretches it out to a weird ratio (300x150; still not what I try to establish in the CSS), and leaves it at that...

What am I doing wrong?

Answer 1

Standard canvas size is 150x100 and CSS will stretch it to the desired size, but it still has 150x100 drawing dots on it, so you must set its size inline

<canvas width="297" height="200"></canvas>

or using javascript:

document.getElementById('card-texture-canvas').width = 297
document.getElementById('card-texture-canvas').height = 200