Image rotate 90º

by Andrew Poes

HTML

<canvas id="canvas" width="480" height="320"></canvas>

CSS

.print {
    position: relative;
    display: inline-block;
    background-color: black;
    color: white;
    font-family: Helvetica, Helvetica-Neue, sans-serif;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: -1.5px;
    padding: 4px 8px;
}

body {
    background-color: #eeeeee;
}

#canvas {
    background-color: #f3f3f3;
}

JavaScript

var image = [
	255,255,0, 255,0,255, 255,0,255, 255,0,255, 255,0,255,
    255,0,255, 0,0,255, 255,0,255, 0,0,255, 255,0,255,
    255,0,255, 255,0,255, 255,255,0, 255,0,255, 255,0,255,
    255,0,255, 0,0,255, 255,0,255, 0,0,255, 255,0,255,
    255,0,255, 255,0,255, 0,0,255, 255,0,255, 255,255,0,
    255,0,255, 255,0,255, 255,0,255, 255,0,255, 255,0,255,
    0,255,255, 0,255,255, 0,255,255, 0,255,255, 0,255,255
]

var scale = 10

$(document).ready(function() {
    if (window.devicePixelRatio == 2) {
        var canvas = document.getElementById('canvas')
        canvas.style.width = "480px";
		canvas.style.height = "320px";
        canvas.setAttribute('width', 960);
        canvas.setAttribute('height', 640);
        var ctx = canvas.getContext('2d')
        ctx.scale(2, 2);
    }

	drawImage(image, 3, 10, 10, 5, 7)
    
    var transposed = transpose(image, 3, 5, 7) // w is now 7, he now 5
    var rotated = rotate(transposed, 3, 7, 5)
    drawImage(rotated, 3, 10, 90, 7, 5)
})

function transpose(image, bitlen, width, height) {
    var t = []
    for (x = 0; x < width; ++x) {
        for (var y = 0; y < height; ++y) {
			var index = y * bitlen * width + x * bitlen
            for (var i = 0; i < bitlen; ++i) {
                t.push(image[index + i])
            }
        }
    }
    return t
}

function rotate(image, bitlen, width, height) {
    for (var y = 0; y < height; ++y) {
        for (var x = 0; x < Math.floor(width / 2); ++x) {
            index = x * bitlen + y * bitlen * width
            endIndex = (width - 1 - x) * bitlen + y * bitlen * width
            for (var i = 0; i < bitlen; ++i) {
                var t = image[index + i]
                image[index + i] = image[endIndex + i]
                image[endIndex + i] = t
            }
    	}	
    }
    return image
}

function drawImage(pixels, bitlen, xOrigin, yOrigin, w, h) {
    var canvas = document.getElementById('canvas')
    var ctx = canvas.getContext('2d')
    for (var y = 0; y < h; ++y) {
	...