var gridDraw = function (ctx, color, x_axis, y_axis) {

    ctx.strokeStyle = color;

    ctx.lineWidth = 0.5;

​

    for (var i = x_axis + 0.5; i < ctx.canvas.width; i += x_axis) {

        ctx.beginPath();

        ctx.moveTo(i, 0);

        ctx.lineTo(i, ctx.canvas.height);

        ctx.stroke();

    }

​

    for (i = y_axis + 0.5; i < ctx.canvas.height; i += y_axis) {

        ctx.beginPath();

        ctx.moveTo(0, i);

        ctx.lineTo(ctx.canvas.width, i);

        ctx.stroke();

    }

};

​

var drawCanvas = document.getElementById('drawCanvas');

                var ctx = drawCanvas.getContext('2d');

                gridDraw(ctx, '#333', 10, 10);

​

                ctx.fillStyle = "#ff0000";              // red color

                ctx.fillRect(10, 10, 100, 50);

​

                var effect = function () {

                    ctx.translate(10, 50);

                    ctx.scale(5, 5);

                    ctx.fillStyle = "#0000ff";          // blue color

                    ctx.fillRect(10, 10, 100, 50);   // Centre at the rotation point  

                }