Question

159

HTML5 canvas drawImage incorrect image size

rated 0 times [ 161] [ 2] / answers: 1 / hits: 6327 / 9 Years ago, wed, march 18, 2015, 12:00:00

Hello i have problem i try to drawing image on the canvas with drawImage function 50px x 50px on the 50px x 50px canvas, but i get smaller than i need.

var canvas = document.getElementById(canvas);

var ctx = canvas.getContext(2d);



var img = new Image();

img.onload = function() {

    $(canvas).css(width, 50);

    $(canvas).css(height, 50);

    ctx.drawImage(img, 0, 0, 50, 50); //bad here why not drawing 50x50px image on the canvas?           

}

img.src = 'http://www.w3schools.com/tags/planets.gif';

<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js></script>

<img src=http://www.w3schools.com/tags/planets.gif width=100 height=100 style=position: absolute; top: 0px; left: 0px>

<canvas id=canvas style=position: absolute; top: 0px; left: 120px; border: 1px solid #000></canvas>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ellisw

Add To Favorites

Follow

Total Points: 625

Total Questions: 92

Total Answers: 88

Location: Kazakhstan

Member since Mon, Sep 26, 2022

2 Years ago

ellisw questions

1 How to check if event target is contained within an element?

Mon, Aug 23, 21, 00:00, 3 Years ago

1 Jest - one function mocks file for multiple test files

Fri, Nov 20, 20, 00:00, 4 Years ago

1 Electron Forge with react?

Sat, Jun 20, 20, 00:00, 4 Years ago

1 material-ui makeStyles: how to style by tag name?

Tue, Apr 21, 20, 00:00, 4 Years ago

1 Using async-await with node-fetch does not return the response to the calling method

Sun, Mar 22, 20, 00:00, 4 Years ago

View All

answered 9 Years ago renag · Accepted Answer

Don't set a canvas's width and height through CSS. This will stretch / compress the actual canvas, scaling the contents.

Use those old HTML width and height attributes instead:

var canvas = document.getElementById(canvas);

var ctx = canvas.getContext(2d);



var img = new Image();

img.onload = function() {

    ctx.drawImage(img, 0, 0, 50, 50);

}

img.src = 'http://www.w3schools.com/tags/planets.gif';

<img src=http://www.w3schools.com/tags/planets.gif width=100 height=100 style=position: absolute; top: 0px; left: 0px>

<canvas

    id=canvas

    style=position: absolute; top: 0px; left: 120px; border: 1px solid #000

    width=50

    height=50>

</canvas>

These attributes actually change the canvas's context's width and height, resulting in a image that's exactly the size you expect it to be.