JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=300 height=558></canvas>

CSS

body {
    background-color: ivory;
}
canvas {
    border:1px solid red;
}

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var img = new Image();
img.onload = start;
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/signature.jpg";

function start() {

    // translate to center-canvas 
    // the origin [0,0] is now center-canvas
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // roate the canvas by +90% (==Math.PI/2)
    ctx.rotate(Math.PI / 2);

    // draw the signature
    // since images draw from top-left offset the draw by 1/2 width & height
    ctx.drawImage(img, -img.width / 2, -img.height / 2);

    // un-rotate the canvas by -90% (== -Math.PI/2)
    ctx.rotate(-Math.PI / 2);

    // un-translate the canvas back to origin==top-left canvas
    ctx.translate(-canvas.width / 2, -canvas.height / 2);

    // testing...just draw a rect top-left
    ctx.fillRect(0, 0, 25, 10);


}