图像未正确显示在 javascript 画布中

Question

我创建了一个 javascript 画布，当用户输入文本时，它会打印在图像上。 代码如下：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <style type="text/css"> canvas { height: 500px; width: 500px; } </style> <div class="container"> <div style="margin-top: 5%;" class="row"> <div class="col-md-6"><canvas id="imageCanvas"></canvas></div> <div class="col-md-6"><input type="text" id="name" placeholder="Name" /></div> </div> </div> <script type="text/javascript"> var text_title = "Heading"; var canvas = document.getElementById('imageCanvas'); var ctx = canvas.getContext('2d'); var img = new Image(); // img.crossOrigin = "anonymous"; window.addEventListener('load', DrawPlaceholder) function DrawPlaceholder() { img.onload = function() { DrawOverlay(img); DrawText(text_title); DynamicText(img) }; img.src = 'card.png'; } function DrawOverlay(img) { ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); ctx.fillStyle = 'rgba(230, 14, 14, 0)'; ctx.fillRect(0, 0, canvas.width, canvas.height); } function DrawText(text) { ctx.fillStyle = "black"; ctx.textBaseline = 'middle'; ctx.font = "50px 'Montserrat'"; ctx.fillText(text, 50, 50); } function DynamicText(img) { document.getElementById('name').addEventListener('keyup', function() { ctx.clearRect(0, 0, canvas.width, canvas.height); DrawOverlay(img); text_title = this.value; DrawText(text_title); }); } </script>

除了图像，一切都很好。 图像未正确进入画布。 它被拉伸或没有得到原来的大小。 我尝试调整画布和所有内容的大小。 我希望图像的原始尺寸按原样显示。 谁能告诉我我应该在我的代码中做什么才能获得图像的原始大小。 提前致谢