Edit in JSFiddle

var paper;

window.onload = function () {
    
    //create paper
    paper = Raphael("canvas");
    
}
    
function jsondraw(){
    startTimer();
    var json = new Array();

    for(j=0;j<50;j++){        
        for(i=0;i<50;i++){
            if(j%2==0){
                json.push({
                    "type":"rect",
                    "x":10*j,
                    "y":20*i,
                    "width":10,
                    "height":10,
                    "stroke":"none",
                    "fill":"#888"
                });
            }else{
                json.push({
                    "type":"rect",
                    "x":10*j,
                    "y":20*i+10,
                    "width":10,
                    "height":10,
                    "stroke":"none",
                    "fill":"#888"
                });
            }
        }
    }
    paper.add(json);
    getTime();
}                

function setdraw() {
    startTimer();
    for(j=0;j<50;j++){        
        for(i=0;i<50;i++){
            if(j%2==0){
                paper.rect(10*j,20*i,10,10)
                    .attr({"stroke":"none","fill":"#888"});                
            }else{
                paper.rect(10*j,20*i+10,10,10)
                    .attr({"stroke":"none","fill":"#888"});
            }
        }
    }
    getTime();
}
    
var startTime;
var status;


function startTimer()
{
    startTime = new Date();
}

function getTime()
{
    var currentTime = new Date();
    alert(currentTime - startTime);
}

<input type="button" onclick="jsondraw()" value="json" />
<input type="button" onclick="setdraw()" value="set" />
<div id="canvas"></div>

body,html
{
    height:100%;
    margin:0;
}

#canvas 
{
    height:99%;
    background:#fff;
}