Run results for: shadow (clip vs draw)

Run details:

User agent: Mozilla/5.0 (Linux; Android 5.1.1; SAMSUNG SM-P600 Build/LMY47X) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/6.2 Chrome/56.0.2924.87 Safari/537.36

Browser: Chrome 56

Operating system: Android 5.1.1

Device Platform: Samsung SM-P600

Date tested: 2024 years ago

Test name	Executions per second
clip	67.3 Ops/sec
draw	12.4 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();