javascript - 画布的fillRect函数忽略等待(Canvas' fillRect function ignores await)

Question

I have a problem with the fillRect canvas function: I use the setFillStyle function to either set the fillStyle to a rgb value or to an image source.(我的fillRect画布函数有问题：我使用setFillStyle函数将fillStyle设置为rgb值或图像源。)

The image will be fetched using the image's onload method.(图像将使用图像的onload方法获取。) Since I want to make sure that the following call to fillRect will be using this fillStyle I made it return a promise and I set its caller to async and awaiting setFillStyle .(由于我想确保对fillRect的以下调用将使用此fillStyle我使它返回了一个setFillStyle并将其调用者设置为async并等待setFillStyle 。) It appears that fillRect ignores the await since sometimes (when the image doesn't get fetched in time) it draws a #000000 color (which is default) over the entire canvas while sometimes (when the image luckily gets fetched in time) it draws the pattern generated of the image.(似乎fillRect忽略了await因为有时（当图像没有及时获取时）它会在整个画布上绘制#000000颜色（默认），而有时（当幸运地及时获取图像时）会绘制图像生成的图案。) async fillArea() { const { width, height } = this.context.canvas; await this.setFillStyle() .catch(({ src }) => console.error(`Failed to load image: ${src}`)); this.context.fillRect(0, 0, width, height); }, setFillStyle() { const { type, value = '', src = '', repeat = '' } = this.hideOptions; this.context.globalCompositeOperation = 'source-over'; if (type === 'color') return this.context.fillStyle = value; return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve({ src }); img.onerror = () => reject({ src }); img.src = src; this.context.fillStyle = this.context.createPattern(img, repeat); }); }, I also tried to not use async await and fall back to .then which didn't lead to a different behavior:(我还尝试不使用async await并回退到.then这不会导致其他行为：) fillArea() { const { width, height } = this.context.canvas; this.setFillStyle() .catch(({ src }) => console.error(`Failed to load image: ${src}`)) .then(() => this.context.fillRect(0, 0, width, height)); }, How can this be resolved since I can't get my head around it?(由于我无法解决这个问题，该如何解决？)   ask by SUBHUMAN translate from so

Answer 1

The problem this code has is that I tried to create the pattern before the actual fetching of the image was resolved.(该代码的问题在于，我试图在解决图像的实际获取之前创建模式。)

The createPattern function defaulted to using #000000 instead of the image to create the pattern.(默认情况下， createPattern函数使用#000000而不是图像来创建图案。) Corrected code would look like this:(更正后的代码如下所示：) async fillArea() { const { width, height } = this.context.canvas; await this.setFillStyle() .catch(({ src }) => console.error(`Failed to load image: ${src}`)); this.context.fillRect(0, 0, width, height); }, setFillStyle() { const { type, value = '', src = '', repeat = '' } = this.hideOptions; this.context.globalCompositeOperation = 'source-over'; if (type === 'color') return new Promise(resolve => resolve(this.context.fillStyle = value)); return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { this.context.fillStyle = this.context.createPattern(img, repeat); resolve(img); }; img.onerror = () => reject({ src }); img.src = src; }); },