perf: using the mask instead WaveMask class

Author: codeacme17

example/src/components/Demo.vue

@@ -68,7 +68,7 @@ const finishHandler = (v: boolean) => {
 }
 
 const clickHandler = (el: Ref<HTMLElement>) => {
-  console.log(el)
+  // do something
 }
 
 const play = () => {

src/components/IllestWaveform.vue

@@ -2,7 +2,6 @@
 import { ref, onMounted, watchEffect, onUnmounted } from 'vue'
 import WebAudioController from '../modules/WebAudio/Controller'
 import Wave from '../modules/Wave/index'
-import WaveMask from '../modules/Wave/WaveMask'
 import { formatSecond } from '../utils/format-time'
 import {
   lazyLoader,
@@ -70,19 +69,17 @@ function lazyLoadHandler() {
 
 // initialize
 const waveRef = ref<HTMLCanvasElement | null>(null)
-const maskRef = ref<HTMLCanvasElement | null>(null)
 const ready = ref<boolean>(false)
 
 let webAudioController: WebAudioController
 let wave: Wave
-let waveMask: WaveMask
 
 // initialize waveform
 async function init(): Promise<void> {
   if (ready.value) return
   emits('onInit', true)
   await initAudio()
-  await Promise.all([initWave(), initWaveMask()])
+  await Promise.all([initWave()])
   ready.value = true
   emits('onReady', ready.value)
 }
@@ -104,22 +101,7 @@ async function initWave(): Promise<void> {
   wave.setupCanvas()
   watchEffect(() => {
     wave._props = props
-    wave.setCanvasStyle()
-  })
-}
-
-// initialize wave mask canvas
-async function initWaveMask(): Promise<void> {
-  waveMask = new WaveMask(
-    maskRef.value as HTMLCanvasElement,
-    props,
-    await webAudioController._filterData,
-    wave._canvas
-  )
-  waveMask.setupCanvas()
-  watchEffect(() => {
-    waveMask._props = props
-    waveMask.setCanvasStyle()
+    wave.setCanvasStyle(maskWidth.value)
   })
 }
 
@@ -237,10 +219,6 @@ defineExpose({
 
     <canvas id="ill-wave" ref="waveRef" />
 
-    <div id="ill-waveMask-container" :style="`width:${maskWidth}px;`">
-      <canvas id="ill-waveMask" ref="maskRef" />
-    </div>
-
     <div
       v-show="ready && props.interact"
       id="ill-cursor"
@@ -286,19 +264,6 @@ defineExpose({
   opacity: 0;
 }
 
-#ill-wave-container > #ill-waveMask-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: inherit;
-  overflow: hidden;
-}
-
-#ill-wave-container > #ill-waveMask-container > #ill-waveMask {
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-
 #ill-wave-container > #ill-cursor {
   position: absolute;
   height: inherit;

src/modules/wave/WaveMask.ts

@@ -36,6 +36,7 @@ export default class Wave {
     this.canvas.width = this.canvas.offsetWidth
     this.canvas.height = this.canvas.offsetHeight
     this.canvas.style.opacity = '1'
+    this.canvasCtx.fillStyle = 'transparent'
     this.canvasCtx.fillRect(0, 0, this.canvas.width, this.canvas.height)
   }
 
@@ -62,8 +63,15 @@ export default class Wave {
     })
   }
 
-  public setCanvasStyle(): void {
+  private drawMask(maskWidth: number): void {
+    this.canvasCtx.globalCompositeOperation = 'destination-atop'
+    this.canvasCtx.fillStyle = this.props.maskColor as string
+    this.canvasCtx.fillRect(0, 0, maskWidth, this.canvas.height)
+  }
+
+  public setCanvasStyle(maskWidth: number): void {
     this.canvasCtx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    this.drawMask(maskWidth)
     this.canvasCtx.lineWidth = this.props.lineWidth as number
     this.canvasCtx.lineCap = this.props.lineCap as CanvasLineCap
     this.canvasCtx.strokeStyle = this.props.lineColor as string