Canvas rotation and translate example.

trippy_spiral.js

var s = 0;
window.onload = function() {
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");
    var w = window.innerWidth,
        h = window.innerHeight;
    cvs.setAttribute("height", h);
    cvs.setAttribute("width", w);
    var make = function(o) {
        ctx.beginPath();
        ctx.fillStyle = o.fillStyle;
        ctx.translate(o.shiftX, o.shiftY);
        ctx.arc(0, 0, o.radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.closePath();
    };
    var draw = function() {
        ctx.save();
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, w, h);

        make({
            fillStyle: "rgb(255, 255, 0)",
            shiftX: w / 2,
            shiftY: h / 2,
            radius: 1
        });
        s = s + 0.01;
        for (var i = 0; i < 56; i++) {
            var nv = [
                Math.floor(Math.random()*255),
                Math.floor(Math.random()*255),
                Math.floor(Math.random()*255),
                ];
            make({
                fillStyle: "rgb(" + nv[0] + ", " + nv[1] + ", " + nv[2] + ")",
                shiftX: Math.sin(i*s) * (i * 10),
                shiftY: Math.cos(i*s) * (i * 10),
                radius: i
            });
        }

        ctx.restore();
        setTimeout(draw, 1000 / 32);
    };
    draw();
};

can be seen http://t.co/BOITZScc