JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="signature" width="150" height="558px" style="border: 1px solid black" />

JavaScript

var canvas = $("#signature")[0];
var context = canvas.getContext("2d");

//Draw a "signature" as sample data
context.beginPath();
context.moveTo(0, 150);
context.lineTo(450, 50);
context.stroke();


//Get the image from the signature
var signatureImageData = canvas.toDataURL();

var img = new Image();
img.onload = function() {
    
    var rotationCanvas = document.createElement('canvas');
    rotationCanvas.width = img.height;
    rotationCanvas.height = img.width;
    
    $(rotationCanvas).css("border","1px solid black");
    
    var context = rotationCanvas.getContext("2d");
    context.translate((rotationCanvas.width/2) - (img.width/2), -(rotationCanvas.height/2) - img.height/4);

    context.rotate(Math.PI/2);    
    context.drawImage(img,0,0);
    context.translate(-((rotationCanvas.width/2) - (img.width/2)), -(-(rotationCanvas.height/2) - img.height/4));    
    document.body.appendChild(rotationCanvas);    
};
img.src = signatureImageData;