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)

ctx = canvas.getContext('2d');
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.

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.

Be a part of the DaniWeb community

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