如何避免在画布上绘制模糊的图像

Question

我正在尝试在画布上绘制图像，但是图像模糊不清，我在Google浏览的this solution上浏览，但对我不起作用。图像仍然非常模糊。

  

我尝试过的事情：

创建了一个画布（宽度为100％）并加载了js：

<canvas id="viewport"></canvas>
<script src="script_canvas.js"></script> 

编辑了script_canvas.js：

var canvas = document.getElementById('viewport'),
context = canvas.getContext('2d');

var map_image = 'https://i.imgur.com/pnqkqlY.png';
var bin_image = 'https://i.imgur.com/bkwpRrm.png';

make_base();
function make_base()
{
  base_image = new Image();
  base_image.src = map_image;
  base_image.onload = function(){
    context.imageSmoothingEnabled = false;
    context.drawImage(base_image, 0, 0, base_image.width * 0.28, base_image.height * 0.28);
    }
 }