如何在画布上绘制调整大小的图像？

Question

我现在正在处理HTML上的图片。我已经将原始图片的尺寸调整为500px *自动，并且我想在画布上重新绘制它，但是当前它显示的是500px * auto图像的原始比例

在我的HTML上

<img id='person' src='man-front-tan.jpg'/>
<canvas id='canvas'></canvas>

在我的js中

var imageElement = document.getElementById('person');
var canvas = document.getElementById('canvas');
imageElement.style.width = '500px';
imageElement.style.height = 'auto';

var ctx = canvas.getContext('2d');
ctx.drawImage(imageElement, 0, 0);

现在会发生什么：