canvas重ねあわせ、文字描画(vue+NUXT)

<template>
  <div justify="center" align="center">
      <form justify="center">
        <v-card class="canvasbase" id="canvas_base" align="left" flat outlined>
          <canvas id="board" height="462px"></canvas>
        </v-card>
        <div>
          <button type="button" @click="download()">
            写真に保存
          </button>	          	        
        </div>
      </form>
  </div>
</template>

<script>

export default {
	layout: "home",
  
	data() {
		return {
            imgURL:'',
		}
	},
	created() {

	},
	mounted() {
        this.initialize()
	},
	methods: {
    async initialize() {
        this.onload()
    },
    download(){
      // ダウンロード用エレメント:aタグ
      var dlLink = document.createElement('a');

      dlLink.href = this.imgURL;
      var tmpextension = dlLink.href.split(";")[0]
      const fileName = `画像.${tmpextension.replace("data:image/", "")}`;
      dlLink.download = fileName;

      document.body.insertAdjacentElement("beforeEnd", dlLink);
      dlLink.click();
      dlLink.remove();

      setTimeout(function() {
        window.URL.revokeObjectURL(dlLink.href);
      }, 1000);      
    },
    onload(){
      // canvas準備
      const board = document.querySelector("#board");  //getElementById()等でも可。オブジェクトが取れれば良い。

      var images = []
      var srcs=[
        "url１",
        "url2",
      ]

      //ロード済Imageオブジェクト数のカウンタ
      var loadCount = 0;

      // Canvas上に画像を表示
      for (var i = 0; i < srcs.length; i++) {
        // Imageのインスタンスを生成し、それぞれの画像を設定
        images[i] = new Image();
        images[i].src = srcs[i];
        const _this = this;
        // 画像の読み込みが終わったら
        images[i].onload = function () {

          // カウントを取る
          loadCount = loadCount + 1;

          // 画像全てloadが終わったら
          if (loadCount === images.length) {
            // ロード後の処理
            _this.loadProcess(images, board);
          }
        };
      }
    },
    // ロード後の処理
    loadProcess(images, canvas){
        // canvasをクリアにする
        let ctx = canvas.getContext("2d");
        var baseHeight = document.getElementById('canvas_base').clientHeight

        // キャンバスに画像を描画
        this.drowImage(images, ctx);

        // canvasを画像に変換
        this.canvasToImage(canvas);
    },

    // キャンバスに画像を描画
    drowImage(images, ctx){
      var maxCanvasWidth = 0;
      if(images.length >= 2){
        var x_shift = (images[0].naturalWidth - images[1].naturalWidth)/2;
      }          
      for (let i = 0; i < images.length; i++) {
        if(i==0){
          ctx.drawImage(images[i], 0, 22);
          images[i] = null;
        }
        else if(i==1){
          ctx.drawImage(images[i], x_shift, 156);
          images[i] = null;
        }
      }
      //キャンバスに文字を描画
      ctx.fillStyle = "white";
      ctx.font = "bold 10px \'Noto Sans JP\',serif"
      ctx.fillText("表示したい文字",85,438)
    },
    // canvasからImgに変換
    canvasToImage(canvas) {
        // canvasを画像に変換
        this.imgURL = canvas.toDataURL('image/png');
    }           
}
}
</script>


<style>

.canvasbase{
  font-size:16px;
  margin-top:28px;
  height:465px;
}
</style>