canvas绘制图片不显示

canvas绘制图片时需要等待图片加载完后才能进行绘制

context.drawImage(img,x,y,width,height);

来自菜鸟的对照表：

img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

        for (const key in lists) {
            let item = lists[key];
            ctx.save();
            let xzImg=new Image();
                xzImg.src=`${this.signglyph[`${item[2]}`].imgUrl}`;
            // 需要等待图片加载完成之后再进行绘制图片
            xzImg.onload = function(){
                ctx.drawImage(xzImg, item[0], item[1], 12, 12);
                ctx.stroke(); // Draw it
             }
        }

canvas模糊问题：下面代码亲测显示得十分清晰！

    makeHighRes(canvas) {
        var ctx = canvas.getContext('2d');       
        var dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
        var oldWidth = canvas.width;
        var oldHeight = canvas.height;
        canvas.width = Math.round(oldWidth * dpr);
        canvas.height = Math.round(oldHeight * dpr);
        canvas.style.width = oldWidth + 'px';
        canvas.style.height = oldHeight + 'px';
        ctx.scale(dpr, dpr);
        return ctx;
    },

也可以使用 hidpi-canvas-polyfill画图，原理跟上面的一致

参考：https://www.html5rocks.com/en/tutorials/canvas/hidpi/?redirect_from_locale=zh