Member Avatar for abhijitkane

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

  • 3 Contributors
  • 2 Replies
  • 125 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by collapsar
Member Avatar for deathwithme

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 developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.