title: Rotate an image inside a canvas and download the rotated image
body: <p>I am trying to rotate an image and save it after that. 
  My problem isn't the rotation, but when I save the image, the image does not have the rotation.</p>
  
  <p>The code is:</p>
  
  <pre><code>rotate = (value) =&gt; {
       //get canvas context
      const ctx = this.canvasRef.getContext("2d");
      var img = new Image();
      img.src = this.state.imgsource;
      var cw = img.width, ch = img.height, cx = 0, cy = 0;
      value = this.state.cont + value;
      //   Calculate new canvas size and x/y coorditates for image
  
      //rotation Code here
  
   //setting state of rotation
      if (this.state.cont == 270 || this.state.cont == -270) {
          this.setState({ cont: 0 });
      } else {
          this.setState({ cont: value });
      }
        //draw the image with the rotation
      this.canvasRef.setAttribute('width', cw);
      this.canvasRef.setAttribute('height', ch);
      ctx.rotate(value * Math.PI / 180);
      img.onload = function () {
          ctx.drawImage(img, cx, cy);
      };
      ctx.save();
    //getting the last state of the image 
      this.setState({ imgsource: img.src });
  
  }
  </code></pre>