drawImage is Scaling my Image Wrongly

This one nearly drove me nuts.

I was trying to copy an image from some img nodes into canvas that was a replica of another canvas with the same dimensions that I'd generated by code. Every time I did it, the items I added were getting their resolution skewed.

This is what I found solved it. The magic is in the creating of the canvas.

Instead, use the 'attr' value of the canvas and then everything was fine.



//Yes!
$('#blah').attr({
        id: 'canvas2',
        width: $("#canvas1").attr("width"),
        height: $("#canvas1").attr("height")    
}).css({
display: 'block',
border: '1 solid'
}).appendTo('body');



//No!
$('#blah').attr({
       id: 'canvas2'    
}).css({
display: 'block',
border: '1 solid',
        width: $("#canvas1").css("width"),
        height: $("#canvas1").css("height")
}).appendTo('body');