fabric.js canvas 更新画布内容踩坑，清空画布重绘，fabric出现闪屏

需求：不断绘制图片、图形、文字等内容，达到实时视频效果。

思路：在使用fabric操作canvas，获取到新数据时先clear()清除画布内容，再add()绘制新的数据内容到画布上达到实时更新效果.

效果：更新内容时会出现闪屏

 原因：clear()函数使用位置不对，

解决方法：clear()必须用在img.onload = () => {}函数之内，且add()绘画函数之前，就可以解决闪屏现象，放add()之后代表函数先执行add()绘制画布，再执行clear()清除画布内容,造成页面没有图像。

在mounted中定义画布

  mounted() {
  this.myCanvas = new fabric.Canvas("myCanvas");//初始化画布