Run results for: createLinearGradient. canvas vs offscreenCanvas

Run details:

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

Browser: Opera 75

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Canvas	97830.3 Ops/sec
offscreenCanvas	100044.1 Ops/sec

Script Preparation code:

var canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext('2d');

var offscreenCanvas = new OffscreenCanvas(100, 100);
var offscreenContext = offscreenCanvas.getContext('2d');

Tests:

Canvas
var gradient = context.createLinearGradient(0, 0, canvas.width, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); context.fillStyle = gradient; context.fillRect(0, 0, context.canvas.width, 1);
offscreenCanvas
var gradient = offscreenContext.createLinearGradient(0, 0, offscreenCanvas.width, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); offscreenContext.fillStyle = gradient; offscreenContext.fillRect(0, 0, offscreenContext.canvas.width, 1);