css指定图片尺寸高度变形,使用css设置画布高度/宽度100％时图像变形

我目前正在尝试将图像绘制到画布上，到目前为止我有这个：

"use strict";

var debugging = true;

var canvas = document.getElementById('astoniaCanvas');

var ctx = canvas.getContext('2d');

function loadUI() {

var topOverlay = new Image();

topOverlay.src = "/images/00000999.png";

topOverlay.onload = function() {

ctx.drawImage(topOverlay, 0, 0, canvas.width, 10);

}

var bottomOverlay = new Image();

bottomOverlay.src = "/images/00000998.png";

if (debugging) {

console.log('Drawing');

}

}

loadUI();

工作正常，但图片加载并看起来像这样：

什么时候看起来像这样：

美观图片的尺寸为800x40。

如果我删除

canvas {

width: 100%;

height: 100%;

}

图像恢复正常，我如何缩放画布？

任何信息都会非常感谢。