Question

I am just trying my hands at HTML5’s most talked feature i.e canvas. There are 2 rectangles and I only want to rotate 1st and keep the 2nd one as it is. Problem is when the below code runs my whole canvas is rotated and both rectangles are rotated. I can’t even find any API where I can get reference to the object that I have drawn and rotate only that specific object instead of the whole context.

Code:

<script type="text/javascript">
    var context;
    var radian = 0.01;
    var w, h;
    $(document).ready(function () {
        w = document.width;
        h = document.height;
        var canvas = $('#canvas');
        context = canvas[0].getContext('2d');
        canvas[0].width = w;
        canvas[0].height = h;
        setInterval(startAnim, 200);
    });

    function startAnim() {
        context.clearRect(0, 0, w, h);
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(0, 0, w, h);
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(255,255,0)';
        context.rotate(radian);
        context.strokeRect(400, 300, 200, 200);
        context.fillRect(400, 300, 200, 200);
        context.fillStyle = 'rgb(0,255,255)';
        context.fillRect(500, 400, 200, 200);
        radian += 0.01;
    }
</script>

How can I prevent this from happening?

Answer 1

Finally, I have resolved the issue on my own by trial and error. This is the code:

<script type="text/javascript">
    var context;
    var radian = 0.01;
    var w, h;
    $(document).ready(function () {
        w = document.width;
        h = document.height;
        var canvas = $('#canvas');
        context = canvas[0].getContext('2d');
        canvas[0].width = w;
        canvas[0].height = h;
        setInterval(startAnim, 100);
    });

    function startAnim() {

        context.save();
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(0,0,0)';
        context.fillRect(0, 0, w, h);
        context.rotate(radian);
        context.strokeStyle = 'rgb(0,0,0)';
        context.fillStyle = 'rgb(255,255,0)';
        context.strokeRect(400, 300, 200, 200);
        context.fillRect(400, 300, 200, 200);
        context.restore();

        context.fillStyle = 'rgb(0,255,255)';
        context.fillRect(500, 400, 200, 200);

        radian += 0.1;
    }
</script>