0

I have the following html :

        <div id="container">
            <canvas id="canvas"></canvas>
        </div>
        <img src="sprites/total.png">

With this css

#container {
    height: 515px;
    width: 1200px;
    margin: auto;
    border: 6px rgba(109, 53, 10, 0.52) groove;
}
#canvas {
    height: 100%;
    width: 100%;
/*  background-image:url(images/tile.png); */
}

I insert my image into the canvas with javascript :

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

    var total = new Image();
    total.src = 'sprites/total.png';
    total.addEventListener('load', function() {
        context.drawImage(this, 0, 0);
    }, false);

However, the size of the image inside the canvas is WAY bigger than what it actually should be... here is a link to the page itself

Thanks all

Namrouch
  • 3
  • 2
  • Remove the height: 100%, width: 100% for canvas. that's what making your image to stretch. – Monie corleone Jun 15 '15 at 10:14
  • The default pixel dimensions of the canvas are 300 x 150px. You can change this size by one of 2 methods. **(1)** You can set the width and height attributes in the html: `` (note the lack of px after the numbers) or **(2)** you can set the canvas (before drawing, sizing it clears it) size in JS. i.e `canvas.width = 1200;` and `canvas.height = 550;` (again these quantities are unitless, but refer to pixels) Since you've not done either, your canvas has 300 x 150 pixels stretched to cover the canvas element. – enhzflep Jun 15 '15 at 10:17

0 Answers0