I want to load an array of images to canvas but don’t know how to achieve it. I would appreciate it if I could get some pointers on how I can achieve it. I am using class-based component on React.
My Code:
drawCanvas(img, prevProps) {
const node = this.canvasRef.current;
const context = node.getContext("2d");
context.drawImage(img, 0, 0);
}
// imgArray = [image1, image2, image3]
componentDidUpdate(prevProps) {
const imageArray = Array.from(imgArray).map((image) => image)
console.log(imageArray)
var img = new Image();
img.src = this.props.image;
img.onload = () => this.drawCanvas(img, prevProps);
}