Image rotation in react-konva

Question

const bush1Image = new Image();
bush1Image.src = 'bush1.png';
bush1Image.rotate(90);

I need to rotate the image before using this.setState, so why the above code doesn't work?

Answer 1

<img> element created with new Image() doesn't have rotate method.

If you want to rotate it you have two ways:

1 Just rotate created Konva image with

<Image image={this.state.image} rotation={90} />

2 Or draw your image into an external canvas with required rotation, and then use that canvas as image property for Konva nodes

const bush1Image = new Image();
bush1Image.onload = () => {
   const canvas = document.createElement('canvas');
   // reversed size, because image will be rotated
   canvas.width = bush1Image.height;
   canvas.height = bush1Image.width;
   const ctx = canvas.getContext('2d');
   ctx.moveTo(0, canvas.widht);
   ctx.rotate(90 * Math.PI / 180);
   ctx.drawImage(bush1Image, 0, 0);
   this.setState({ image: canvas })
}
bush1Image.src = 'bush1.png';