Benchmark: createLinearGradient. canvas vs offscreenCanvas

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Canvas
offscreenCanvas

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

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/OS: Opera 75 on Windows

View result in a separate tab

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

createLinearGradient. canvas vs offscreenCanvas (version: 0)

Comparing performance of: Canvas vs offscreenCanvas

Created: 3 years ago by: Registered User

Jump to the latest result

Canvas

offscreenCanvas

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A