canvas绘制层级以及清晰度问题

前端用canvas绘制时，有时候会出现层级问题，导致有的需要显示的图片被其他图片遮住，但是canvas又没有可以设置层级的配置，这时我们可以用promise来解决层级的问题，然后再按照顺序去绘制，同时在绘制canvas时如果有图片经常会出现图片模糊的问题，我们可以通过scale来放大canvas，同时将相关图片的尺寸放大相应倍数，这样生成的canvas就比较清晰，即使是保存成图片也很清晰，亲测有效，上代码

<template>
  <div id="canvas">
    <canvas id="canvasTest"></canvas>
  </div>
</template>

export default {
  name: 'canvasTest',
  data () {
    return {
      bgImg: require('../../common/images/Bg.png'),
      codeImg: require('../../common/images/code.png'),
    }
  },
  created () {},
  mounted () {  
   this.drawImg();
  },
  methods: {
    drawStart(cxt) {
      return (src, x, y, width, height) => {
        return new Promise((resolve, reject) => {
          const img = new Image();
          img.crossOrigin = 'anonymous';
          img.onload = () => {
            cxt.drawImage(img, x, y, width, height);
            resolve(img);
          };
          img.src = src;
        });
      };
   },
    async drawImg(){
      let that = this;
      
      let screenWidth = window.innerWidth
      let screenHeight = window.innerHeight
      var canvas = document.getElementById("canvasTest")
      var ctx= canvas.getContext("2d")

      ctx.scale(2, 2); // 放大2倍  提高清晰度
      canvas.width = screenWidth*2
      canvas.height = screenHeight*2

      var bgImg = that.drawStart(ctx)
      await bgImg(that.bgImg, 0, 0, screenWidth*2, screenHeight*2);

      var codeImg=that.drawStart(ctx)
      await codeImg(that.codeImg, 20, 20, 380, 380); //codeImg显示在bgImg之上

    },
  }
}