Как масштабировать изображение динамически с использованием холста

Question

Я пытаюсь изменить размер изображения на основе размера холста. Мой код ниже. Проблема в том, что когда я пытаюсь drawImage(), он рисует отлично, но пиксели искажаются внутри изображения. Любая помощь была бы высоко оценена! Я пытался сделать много вещей, как манипулируя пикселей, используя холст ImageData, но не повезло вообще :(

var imgURL = $('img#AS0017CF5A').attr('src'); 
       imgH = $('img#AS0017CF5A').height(); 
       imgW = $('img#AS0017CF5A').width(); 
       $('img#AS0017CF5A').parent().attr('id','pImg'); 
       $('img#AS0017CF5A').hide(); 

       imageObj = new Image(); 

       imageObj.onload = function(ev) { 

        document.getElementById('pImg').innerHTML = '<canvas id="myCanvas" width="' + imgW + '" height="' + imgH + '"></canvas>'; 
        var toto = document.getElementById("myCanvas"); 
        var c = toto.getContext("2d"); 
        c.drawImage(imageObj, 0, 0, imgW, imgH); 

        //context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height, 0, 0, imgW, imgH);     
       }; 
       imageObj.src = imgURL; 

Answer 1

Этот код работает для меня:

var img = new Image(); 
img.src = "icon.png"; 
img.onload = function() 
{ 
    document.body.innerHTML = '<canvas id="toto" width="' + img.width + '" height="' + img.height + '"></canvas>'; 
    var toto = document.getElementById("toto"); 
    var c = toto.getContext("2d"); 
    c.drawImage(img, 0, 0, img.width, img.height); 
} 

Может быть, это JQuery, который потерпел неудачу создал холст правильно?

И обязательно не имеют какой-либо ширина/высота в вашем CSS установлен на холсте.