javascrip 用canvas绘制矩形在第一次加载时无法正确显示的解决办法

<canvas class="canvas-block" id="myCanvas" width="400" height="400"></canvas>

// 点击按钮绘制图像

handleTagClick (item) {

　　this.loadCanvas()

},

 

loadCanvas (val) {

　　const canvas = document.getElementById("myCanvas"); //读取canvas元素的id

　　let context = canvas.getContext("2d");

　　const ele = document.querySelector('.wrap')

　　// 清除掉原来画的

　　context.clearRect(0, 0, width, height);

　　// 规定50ms后再绘制，主要是要先让初始化都加载完再画，否则第一次加载不显示

　　setTimeout(() => {

　　　　context.beginPath();

　　　　context.fillStyle = "rgba(255,193,0,0.3)"; //填充的颜色

　　　　context.strokeStyle = "#FFC100"; //边框颜色

　　　　context.linewidth = 1; //边框宽

　　　　context.fillRect(x, y, width, height); //填充颜色 x y坐标 宽 高

　　　　context.strokeRect(x, y, width, height); //填充边框 x y坐标 宽 高

　　　　context.closePath();

　　}, 50)

},