title: how to make context rotate on click
body: <p>I want to make the context inside the canvas to rotate on button click, I'm pretty sure that I have to use <code>onclick</code>, but I don't know where to put it or what logic do I have to write inside it. Can anyone help me out? </p>
  
  <p>I tried using jquery on click but that does not work:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="file" id="fileInp" onchange="readImage(this)"&gt;
  &lt;button type="button" class="rotate"&gt;Rotate&lt;/button&gt;
  &lt;div&gt;
  &lt;canvas id="canvasImg" style="max-width:100%; border:solid;" width="100%" height="100%"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>function readImage(input) {
      const canvas = document.getElementById('canvasImg');
      const context = canvas.getContext("2d");
      context.canvas.width = window.innerWidth;
      context.canvas.height = window.innerHeight;
      context.clearRect(0, 0, canvas.width, canvas.height);
      if (input.value !== '') {
          imgSrc = window.URL.createObjectURL(input.files[0]);
      }
      const img = new Image();
      img.onload = function() {
          context.drawImage(img, 0, 0);
      }
      img.src = imgSrc;
  }
  
  jQuery('.rotate').on('click', function() {
      degree = 90;
      drawRotate(degree);
  })
  
  function drawRotate(degree) {
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.save();
      context.translate(canvas.width / 2, canvas.height / 2);
      context.rotate(degrees * Math.PI / 180);
      context.drawImage(image, -image.width / 2, -image.width / 2);
      context.restore();
  }
  </code></pre>