JSFiddle - React, Tailwind, and code Playground

by cfddream

HTML

<div id="imageinfo">
</div>
<div class="avatar240">
    <canvas id="avatar240" width="240" height="240"></canvas>
</div>
<div class="avatar80">
    <canvas id="avatar80" width="80" height="80"></canvas>
</div>
<button id="rotate">Rotate</button>

CSS

body {
    background: #555;
}
.avatar240,
.avatar80 {
    margin-left: 30px;
    margin-top: 30px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
.avatar240 {
    float: left;
    width: 240px;
    height: 240px;
}
.avatar80 {
    float: left;
    width: 80px;
    height: 80px;
}

button {
    margin-top: 30px;
}

JavaScript

var path = "http://hacks.mozilla.org/wp-content/themes/Hacks2010/img/mozilla.png";
var path1 = 'https://secure.gravatar.com/avatar/c062c91b987ba164275c0d973b475f3d?s=140&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png';

var path2 = 'http://www.html5rocks.com/static/images/screenshots/workers/unresponsive_script.gif';

var path3 = 'http://creativejs.com/wp-content/uploads/2012/03/getUserMedia.jpg';

var c240 = document.getElementById('avatar240'),
    ctx240 = c240.getContext('2d'),
    c80 = document.getElementById('avatar80'),
    ctx80 = c80.getContext('2d'),
    imginfo = document.getElementById('imageinfo'),
    img = new Image(),
    i = 80 / 240,
    deg = Math.PI * 90 / 180,
    rotate = -1;

img.src = path3;

img.onload = function() {
    imginfo.innerHTML = 'width: ' + img.width + ', height: ' + img.height;
    //imgx = img.width;
    //imgy = img.height;
    ctx240.translate(120, 120);
    ctx240.drawImage(img, -img.width / 2, -img.height / 2);
    ctx80.translate(40, 40);
    ctx80.drawImage(img, -img.width / 2 * i, -img.height / 2 * i, img.width * i, img.height * i);

};

var j = 0;

function rotateF(e) {
    j--;
    drawRotatedImage(ctx240, img, 0, 0, j, 240);
    drawRotatedImage(ctx80, img, 0, 0, j, 80);
}

function drawRotatedImage(ctx, image, x, y, angle, type) {
    // save the current co-ordinate system 
    // before we screw with it
    ctx.translate(-type / 2, -type / 2);
    ctx.clearRect(0, 0, type, type);
    ctx.translate(type / 2, type / 2);
    ctx.save();

    // move to the middle of where we want to draw our image
    ctx.translate(x, y);

    // rotate around that point, converting our 
    // angle from degrees to radians 
    ctx.rotate(angle * deg);

    // draw it up and to the left by half the width
    // and height of the image 
    if (type === 240) ctx.drawImage(image, -(image.width / 2), -(image.height / 2));
    else if (type === 80) ctx.drawImage(image, -(image.width / 2) * i,...