Run results for: shadow (clip vs draw)

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36 OPR/50.0.2762.58

Browser: Opera 50

Operating system: Windows

Device Platform: Other

Date tested: 2024 years ago

Test name	Executions per second
clip	2785.7 Ops/sec
draw	4301.7 Ops/sec

Script Preparation code:

var c1 = document.createElement('canvas');
c1.width = 3500;
c1.height = 3500;
var c2 = document.createElement('canvas');
c2.width = 3500;
c2.height = 3500;
var c3 = document.createElement('canvas');
c3.width = 3500;
c3.height = 3500;
var ctx1 = c1.getContext('2d');
var ctx2 = c2.getContext('2d');
var ctx3 = c3.getContext('2d');

function clip() {
ctx1.beginPath();
ctx1.fillColor = 'red';
ctx1.arc(400, 400, 120, 0, Math.PI*2, false);
ctx1.arc(600, 400, 120, 0, Math.PI*2, false);
ctx1.fill();
ctx2.save();
ctx2.rect(520, 300, 280, 300);
ctx2.clip();
ctx2.beginPath();
ctx2.shadowColor = 'black';
ctx2.shadowBlur = 30;
ctx2.shadowOffsetX = 15;
ctx2.shadowOffsetY = 15;
ctx2.drawImage(c1, 500, 280, 320, 340);
ctx2.restore();
}

function draw() {
ctx1.beginPath();
ctx1.fillColor = 'red';
ctx1.arc(400, 400, 120, 0, Math.PI*2, false);
ctx1.arc(600, 400, 120, 0, Math.PI*2, false);
ctx1.fill();
ctx2.shadowColor = 'black';
ctx2.shadowBlur = 30;
ctx2.shadowOffsetX = 15;
ctx2.shadowOffsetY = 15;
ctx2.drawImage(c1, 500, 280, 320, 340);
ctx3.drawImage(c2, 520, 300, 280, 300);
}

Tests:

clip
clip();
draw
draw();