Run results for: canvas fillStyle color format w/ rendering

Run details:

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

Browser: Chrome 107

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Script Preparation code:

var canvas = document.createElement("canvas");
canvas.width = 1920;
canvas.height = 1080;
var ctx = canvas.getContext("2d");

Tests:

hex rgb
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "#FF0000"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);
hex rgba
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "#FF0000FF"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);
rgb func with spaces
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "rgb(255, 0, 0)"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);
rgb func without spaces
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "rgb(255,0,0,1)"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);
rgba func with spaces
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "rgba(255, 0, 0, 1)"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);
rgba func without spaces
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "rgba(255,0,0,1)"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);