JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width='150' height='150' id='mycanvas'></canvas>

JavaScript

var canvas = document.getElementById('mycanvas');
      var context = canvas.getContext('2d');
	  var imageObj2 = new Image();
      var imageObj = new Image();

      imageObj.onload = function() {
        // draw cropped image
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 75;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = 0;
        var destY = 0;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
        drawRotated(12, imageObj, 225, sourceY, sourceWidth, sourceHeight, 75, destY, destWidth, destHeight);
      };
      imageObj2.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
 imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

function drawRotated(degrees, image, sx,sy,sw,sh,dx,dy,dw,dh){
    //context.clearRect(0,0,canvas.width,canvas.height);

    // save the unrotated context of the canvas so we can restore it later
    // the alternative is to untranslate & unrotate after drawing
    context.save();

    // move to the center of the canvas
    context.translate(canvas.width/2,canvas.height/2);

    // rotate the canvas to the specified degrees
    context.rotate(degrees*Math.PI/180);
    
    context.translate(-canvas.width/2,-canvas.height/2);
    // draw the image
    // since the context is rotated, the image will be rotated also
    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);

    // we’re done with the rotating so restore the unrotated context
    context.restore();
}