Test rotation

by BeNdErR

HTML

<canvas id="canvas" width="600" height="600"></canvas>

JavaScript

(function(){
    
    function init(){
        var interval;
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var currRotation = 0;
        
        var container = {
            x : 0,
            y : 0,
            width : canvas.width,
            height : canvas.height,
            background : "#666699"
        }
        
        var rectangle = {
            x : 150,
            y : 150,
            width : 100,
            height : 150,
            rotationSpeed : 10
        }
        
        function drawContainer(){
            context.fillStyle = container.background;
            context.fillRect(container.x, container.y, container.width, container.height);
        }
        function draw(){
            drawContainer();
            context.save();
            context.fillStyle = "black";
            context.beginPath();
            
            
            context.translate(rectangle.x + rectangle.width/2, rectangle.y + rectangle.height/2);
            currRotation += rectangle.rotationSpeed;
            currRotation = currRotation >= 360 ? 0 : currRotation;
            context.rotate(currRotation * Math.PI / 180);
            context.rect(-rectangle.width/2, -rectangle.height/2, rectangle.width, rectangle.height);
            context.fill();
            context.restore();
        }
        
        function startAnimation() {
            interval = setInterval(draw, 100);
        }

        function endAnimation() {
            clearInterval(interval);
        }
        
        
        startAnimation();
    }
    
    window.addEventListener("load", init, false);
    
})();