JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

<canvas id='canvas' width='400' height='400'></canvas>
<pre id='out'></pre>

CSS

#canvas {
    border:1px solid #000000;
}

JavaScript

document.getElementById('canvas');

var cow = new Image();
cow.onload = drawCow;
cow.src = 'http://www.zeldauniverse.net/wp-content/uploads/2009/12/Cow1.png'
//document.body.appendChild(cow);
cow.width = 100;
cow.height = 100;

Math.TAU = Math.PI * 2;

var canvas = document.querySelector('#canvas');
var context = canvas.getContext('2d');
function drawCow(event) {
    out("loaded");
    var angle=Math.TAU / 20;
    var x=200;
    var y=150;
    var width=100;
    var height=100;
    var originX=width/2;
    var originY=height/2;
    
    context.rect(x,y,width,height);
    context.stroke(); 
            
    context.drawRotatedImage(cow, x, y, width, height, angle, width/2, height/2);
    context.drawRotatedImageOld(cow, x-150, y, width, height, angle, width/2, height/2);
}

CanvasRenderingContext2D.prototype.drawRotatedImageOld = function(image, x, y, width, height, angle, originX, originY) {
    if (angle === undefined)   { angle = 0; }
    if (originX === undefined) { originX = 0; }
    if (originY === undefined) { originY = 0; }
    
    this.translate(x + originX, y + originY);
    this.rotate(angle);
    this.drawImage(image, -originX, -originY, width, height);
    this.rotate(-angle);
    this.translate(-x -originX, -y -originY); 
}

CanvasRenderingContext2D.prototype.drawRotatedImage = function(image, x, y, width, height, angle, originX, originY) {
    if (width === undefined)   { width = image.width; }
    if (height === undefined)  { height = image.height; }
    if (angle === undefined)   { angle = 0; }
    if (originX === undefined) { originX = 0; }
    if (originY === undefined) { originY = 0; }
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    
    context.setTransform(cos, sin, -sin, cos, x+originX, y+originY);
    this.drawImage(image, -originX, -originY, width, height);
    this.resetTransform();
}

CanvasRenderingContext2D.prototype.resetTransform = function() {
	this.setTransform(1, 0, 0, 1, 0, 0);
}


out("Working");
function...