JSFiddle - React, Tailwind, and code Playground

by jmjpro

JavaScript

var image = new Image();
image.src = "http://www.gravatar.com/avatar/9f54c1f814e618404997a7291930064a?s=32&d=identicon&r=PG";

image.onload = function() {
    var canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        DEGREES_TO_ROTATE = 135,
        x = 50,
        y = 50;
        
    canvas.width = canvas.height = 400;
    
    document.body.appendChild(canvas);
    
    var widthHalf = Math.floor( image.width / 2 ),
        heightHalf = Math.floor( image.height / 2 );

        ctx.save();

        ctx.translate(  x, y );
        ctx.translate( widthHalf, heightHalf );
        ctx.rotate( ( Math.PI / 180 ) * DEGREES_TO_ROTATE );
        ctx.drawImage( image, -widthHalf, -heightHalf );
        ctx.restore();    

};