cost of canvas.getContext

HTML

<div>
    <canvas id="source" width="640" height="480"/>
</div>
<div>
    <canvas id="target" width="640" height="480"/>
</div>

CSS

#source {
    padding:10px;
    background-color:green;
}

#target {
    padding:10px;
    background-color:blue;
}

JavaScript

var source = document.querySelector("#source");
var target = document.querySelector("#target");
var targetContext = target.getContext('2d');

function drawOnSource() {

    var sourceContext = source.getContext('2d');
    sourceContext.beginPath();
    sourceContext.rect(10,10,600,400);
    sourceContext.fillStyle = 'yellow';
    sourceContext.fill();
    sourceContext.lineWidth = 7;
    sourceContext.strokeStyle = 'black';
    sourceContext.stroke();    
}

drawOnSource();

function drawWithNewContext() {
    var newContext = target.getContext('2d');
    newContext.drawImage(source, 0, 0, 640,480);
}

function drawWithExistingContext() {
    targetContext.drawImage(source, 0, 0, 640,480);
}

var time = new Date();

for(var i = 0; i < 10000; i++) {
    drawWithNewContext();
}

console.log("time was " + (new Date() - time));

 time = new Date();

for(var i = 0; i < 10000; i++) {
    drawWithExistingContext();
}

console.log("time was " + (new Date() - time));