Cacher is the code snippet organizer for pro developers

<template>
  <canvas></canvas>
</template>

<script>
export default {
  data() {
    return {
      width: 1280,
      height: 720,
    }
  },
  mounted() {
    this.$el.width = this.width * 2
    this.$el.height = this.height * 2
    this.ctx = this.$el.getContext('2d')
    this.ctx.scale(2,2);
    this.$el.style.width = this.width + 'px';
    this.$el.style.height = this.height + 'px';

    this.draw();
  },
  methods: {
    draw() {
      this.ctx.clearRect(0, 0, this.width, this.height);

      // 背景の白を描画
      this.ctx.fillStyle = 'rgba(255,255,255,1)';
      this.ctx.fillRect(0, 0, this.width, this.height);

      // 新しく描画する部分と重なったら透過 ＝ 円を描画した部分のみ透過される
      this.ctx.globalCompositeOperation = 'destination-out';
      this.ctx.beginPath();
      this.ctx.arc(
        this.width/2, 0,
        600,
        0, Math.PI*2
      );
      this.ctx.closePath();

      this.ctx.fill();
    }
  },
}
</script>