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

Question

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

Answer 1

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.