JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<canvas id="c" ></canvas>

CSS

body {
    background: #CEF;
}

JavaScript

// Grab the Canvas and Drawing Context
var canvas = $('#c');
var ctx = canvas.get(0).getContext('2d');

//rotate point x,y around origin with angle a, get back new point 
function rotate(x, y, a) {
    var cos = Math.cos,
        sin = Math.sin,

        a = a * Math.PI / 180, 
        xr =  x * cos(a) - y * sin(a);
        yr =  x * sin(a) + y * cos(a);

    return [xr, yr];
}

// Create an image element
var img = document.createElement('IMG');

// When the image is loaded, draw it
img.onload = function () {
		var width = img.naturalWidth;
    var height = img.naturalHeight;

		canvas.attr('width', width);
    canvas.attr('height', height);
    
    //only to show that borders of canvas
    ctx.rect(0,0,width,height);
		ctx.fillStyle="red";
		ctx.fill();
    
    ctx.save();
    ctx.translate(0, height);
    ctx.rotate(-40*Math.PI/180); //comment this line out to see orign image
    ctx.translate(0, -height);
    ctx.drawImage(img, 0, 0);
    ctx.restore();
    
}

// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";