Resizing A .png Image When Drawing To Html5 Canvas Using Javascript

I am trying to draw a few .png images to the HTML5 canvas using JavaScript. I currently have a function that will draw an image to the canvas, but the image is too large for the ca

Solution 1:

Are you using CSS to set the size of the canvas? You need to set a height and width on the element instead or everything in your canvas will be scaled "unexpectedly". This could be your problem.

See Strange HTML5 Canvas drawImage behaviour

Solution 2:

I had trouble finding the problem in your code... But I found it !

You gonna hate this : you wrote image.onLoad instead of image.onload... yes, javascript is case-sensitive. :-)

correct code is :

var image1 = newImage();

image1.onload = function(){
                context.drawImage(image1, 50, 50, 10, 10);
                };
            image1.src="1.png";

Solution 3:

drawImage() takes additional width and height parameter:

   context.drawImage(image, x, y, width, heighT)

https://duckduckgo.com/?q=!mdn+drawimage