Pro Android Web Game Apps - Ch. 2 Rotate

by Denise Nepraunig

HTML

<canvas width="500" height="250" id="myCanvas1"></canvas>
<canvas width="500" height="250" id="myCanvas2"></canvas>
<canvas width="500" height="250" id="myCanvas3"></canvas>
<canvas width="500" height="250" id="myCanvas4"></canvas>

JavaScript

(function () {
    var context = document.getElementById("myCanvas1");
    var ctx = context.getContext('2d');
    ctx.strokeRect(0, 0, 500, 250);
    ctx.fillRect(50, 50, 100, 100);
}());

(function () {
    var context = document.getElementById("myCanvas2");
    var ctx = context.getContext('2d');
    ctx.strokeRect(0, 0, 500, 250);
    ctx.rotate(Math.PI / 4);
    ctx.fillRect(50, 50, 100, 100);
}());

(function () {
    var context = document.getElementById("myCanvas3");
    var ctx = context.getContext('2d');

    ctx.strokeRect(0, 0, 500, 250);
    ctx.rotate(Math.PI / 4);
    ctx.translate(100, 100);
    ctx.fillRect(50, 50, 100, 100);
}());

(function () {
    var context = document.getElementById("myCanvas4");
    var ctx = context.getContext('2d');
    ctx.strokeRect(0, 0, 500, 250);
    ctx.translate(100, 100);
    ctx.rotate(Math.PI / 4);
    ctx.translate(-100, -100);
    ctx.fillRect(50, 50, 100, 100);
}());