JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var fitAspectRatio = function(srcWidth, srcHeight, fitWidth, fitHeight) {
if(fitHeight > fitWidth) {
theta = Math.PI / 2;
var temp = srcWidth;
srcWidth = srcHeight;
srcHeight = temp;
} else {
theta = 0;
}
var ratio = [fitWidth / srcWidth, fitHeight / srcHeight];
ratio = Math.min(ratio[0], ratio[1]);
return {
width : srcWidth * ratio,
height : srcHeight * ratio,
angle : theta
};
};
var img = new Image();
img.src = 'http://everyguyed.com/wp-content/uploads/2011/02/fashion-tips-for-tall-men.jpg';//'image.jpg';
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
window.onresize = function() {
var newsize = fitAspectRatio(img.width, img.height, window.innerWidth, window.innerHeight);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
img.centerX = canvas.width / 2;
img.centerY = canvas.height / 2;
if(newsize.angle !== 0) {
ctx.translate(img.centerX, img.centerY);
ctx.rotate(newsize.angle);
ctx.translate(-img.centerX, -img.centerY);
ctx.drawImage(img, (canvas.width - newsize.height) / 2, (canvas.height - newsize.width) / 2, newsize.height, newsize.width);
} else {
ctx.drawImage(img, (canvas.width - newsize.width)...