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

Question

我正在尝试在我的画布上绘制图像，但它很模糊，在谷歌上浏览我找到了这个解决方案，但它对我不起作用。图像仍然高度模糊。

我试过的：

创建了一个画布（宽度 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);
    }
 }

标签： javascripthtmlcanvas