Html5 холст drawImage растянут

Я попытался нарисовать изображение на холсте html5. Проблема заключается в растягивании изображения в холсте

load('img_the_scream',
    'http://www.w3schools.com/tags/img_the_scream.jpg',
    function( img ){
        console.log(  img.width , img.height );
        ctx.drawImage( img, 10, 10 , img.width , img.height );
    }
);

Я добавил эту проблему в http://jsfiddle.net/75rAU/

Ответ 1

Это потому, что вы изменили размер холста в CSS. Холст имеет два отдельных размера: размер HTML (тот, который вы помещаете внутри тега canvas), и размер css, который на самом деле является масштабированием холста. Размер HTML - это размер, который вы контролируете (при рисовании, он использует этот размер), а размер CSS - это отображаемый размер, который является масштабированием размера HTML.

Итак, ваш холст имеет размер по умолчанию (который я не помню), но изменен (и растянут) с помощью css

HTML:

<canvas id="cv" width="350" height="350"></canvas>

CSS:

 #cv {
    background:#ff0;
}

Здесь я обновил вашу скрипту с правильной назначением размера

Ответ 2

Холст имеет собственные размеры. 300x150 по умолчанию. Стили (ширина/высота) просто растягивают canvas как любое изображение. Таким образом, вы должны сильно настроить размеры на то, что вы хотите. Вы можете сделать это через html <canvas width="123" height="123"></canvas> или из JS-кода canvas.width = canvas.height = 123. Кроме того, здесь вы можете установить размеры по свойствам изображений canvas.width = img.width и т.д.

Итак, посмотрите на jsfiddle: http://jsfiddle.net/75rAU/3/ Он хорошо работает

Маленький upd: http://jsfiddle.net/75rAU/4/ - это тоже может помочь