html px 和图片像素,HTML5画布大小和分辨率

我写了一个简单的例子来说明这一点.

画布大小为500px * 400px.我的图像的原始大小是200px * 160px,dpi为480.我想在画布中以原始大小显示此图像,以便不会调整大小,这会使图像模糊.

这是代码：

$(document).ready(function() {

$("#canvas").width(500);

$("#canvas").height(400);

var canvas = $("#canvas").get(0);

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

var image = new Image();

image.src = "fish01.png"; // size is 200px * 160px

ctx.drawImage(image,0); // same with ctx.drawImage(image,200,160);

});

原始图片是：

结果是：

我认为这很奇怪,因为画布的大小是500px * 400px,图像的大小是200px * 160px,图像如何超出画布的范围？似乎图像已经调整大小.

我想知道如何显示原始大小的图像.请给出一些建议.谢谢！