JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 960px; height: 640px; background: #666666; border-radius: 10px; overflow: none; padding: 10px;">
            <canvas id="canvas" width="960" height="640"></canvas>
        </div>
        <input type="button" value="rotate" id="rotate"/>

JavaScript

var img;
        $(document).ready(function() {
                draw();
                $("#rotate").click(function() {
                    rotateMap();
                });
        });

        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            img = new Image();
            img.onload = function(){
                  var width = this.width;
                  var height = this.height;
                  var positionX = 0;
                  var positionY = 0;
                  console.log(positionY);
                  ctx.drawImage(img,positionX, positionY);
                  console.log(height);
            };
            img.src = 'images/35e.png';
        }

        function rotateMap() {
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.save();
            ctx.translate(0,0);
            ctx.rotate(1.57079633);
            ctx.drawImage(img, 0, 0);
            ctx.restore();
        }