CODEWITHSUNDEEP
javascripthtmlcanvasdrawimage
Mr. X
Mr. X

Reputation: 877

canvas.drawImage() renders only the top half of the source image

I am trying to make a JS image cropper from scratch. I get the cropping part pretty much okay, but when I try to render the cropped section of the image into a canvas using drawImage(), the output displays only the top half of the image. Any idea what might be wrong?

CodePen link: https://codepen.io/virtuoso/full/MxrWrN

Upvotes: 0

Views: 871

Answers (1)

Mr. X
Mr. X

Reputation: 877

Found a solution from this post: canvas drawimage draw zoomed image

The problem was that I was changing the <canvas> element's style attribute to set its width and height, when I should have used its width and height attributes instead.

Upvotes: 3

Related Questions