Javascript在画布中加载图像而不会丢失质量

Question

我使用canvas元素来显示图像，因为我需要操作图像像素 当我在img标记中加载图像时，它具有良好的质量，但是当我使用canvas加载图像时，它会像素化。 结果如下：
with img tag

with canvas

我如何解决这个问题？

----编辑----- 我已经部分解决了，但结果还不是最好的。 新图像和代码：
with img tag

with canvas

代码：

    var c = document.getElementById("c"); //canvas
    var i = document.getElementById("i"); //element from which take the dimensions 
    var image = new Image();
    image.src = "./rendering-sito/renderoutput/v6p-x-render/jpg60/v6p-x-render_Camera0010010.jpg";


    c.width  = i.width;
    c.height  = i.height;
    c.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, 0, c.width, c.height);