I'm trying to display an image in a canvas element. After computing the required width and height of the canvas, I'm calling the drawImage() method on the canvas context.

Here is the javascript code:
(c is the id of the canvas, ctx is the context)

$("#c").width(aw);
$("#c").height(ah);
	
ctx = canvas.getContext('2d');
alert(aw);
ctx.drawImage(img1, 0, 0, aw, ah);

Even though the dimensions of both the canvas and the image are set to aw X ah, sometimes the image shown in the canvas is compressed vertically (the width of the image is approx. aw/2).

Any help would be appreciated.
Thanks

Hi,
I think, your problem about <canvas> tag features. Your canvas line's width and height is smaller than your image's width and height. So your image compressed. Check your canvas diemension features.
Thanx

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.