How to avoid HTML Canvas auto-stretching

Posted by Tom on Stack Overflow See other posts from Stack Overflow or by Tom
Published on 2010-05-23T14:08:55Z Indexed on 2010/05/23 14:10 UTC
Read the original article Hit count: 320

Filed under:
|
|

I have the following piece of HTML:

<style type="text/css">
    #c{width:200px;height:500px}
</style>
<canvas id="c"></canvas>
<script type="text/javascript">
    var i = new Image();
    i.onload = function () {
        var ctx = document.getElementById('c').getContext('2d');
        ctx.drawImage(i, 0, 0);
    }
    i.width = i.height = 20; // actual size of square.png
    i.src = 'square.png';
</script>

The issue is that the drawn image is automatically stretched (resized) proportionally with the size of the canvas. I have tried using all available parameters (drawImage(i, 0, 0, 20, 20, 0, 0, 20, 20)) and that didn't help.

What is causing my drawing to stretch and how can I prevent that?

Thanks,
Tom

© Stack Overflow or respective owner

Related posts about html5

Related posts about canvas