JSFiddle - React, Tailwind, and code Playground

HTML

<button id="left" value="LEFT">LEFT</button>
<button id="right" value="RIGHT">RIGHT</button>
<button id="load" value="LOAD">LOAD</button>
<canvas id="myCanvas" width="600px" height="600px"/>

JavaScript

var canvas, context, imageObj;

function loadCanvas() {
    canvas = document.getElementById("myCanvas");
    context = canvas.getContext("2d");
    imageObj = new Image();
    imageObj.setAttribute('id', 'img');

    imageObj.onload = function() {

        var width = this.width;
        var height = this.height;
        context.drawImage(imageObj, -100, 0, width / 4, height / 4);

    };
    imageObj.src = "http://2.bp.blogspot.com/-YgYOZDXOpEw/T5cWJ8mxJsI/AAAAAAAABMc/nsEZRgj3Vc4/s1600/apple+granny+smith.jpg";
}

$(document).ready(function() {
    $('#left').click(function() {

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.translate((imageObj.width / 8), (imageObj.height / 8));
        context.rotate(-90 * Math.PI / 180);
        context.translate(-(imageObj.width / 8), -(imageObj.height / 8));
        context.drawImage(imageObj, 0, 0, imageObj.width / 4, imageObj.height / 4);


    });
    $('#right').click(function() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.translate((imageObj.width / 8), (imageObj.height / 8));
        context.rotate(90 * Math.PI / 180);
        context.translate(-(imageObj.width / 8), -(imageObj.height / 8));
        context.drawImage(imageObj, 0, 0, imageObj.width / 4, imageObj.height / 4);
    });

});

$("#load").click(function() {
    loadCanvas();
});