Canvas FillStyle

Benchmark created on

Preparation HTML

<canvas id='canvas'></canvas>

Setup

const canvas = document.querySelector('#canvas');
const context = canvas.getContext('2d');
const colors = [
  "#4b0057",
  "#4c0059",
  "#4c005b",
  "#4c005c",
  "#4d005e",
  "#4d005f",
  "#4d0261",
  "#4d0362",
  "#4e0564",
  "#4e0765",
  "#4e0966",
  "#4e0b68",
  "#4e0d69",
  "#4e0f6b",
  "#4e106c",
  "#4f126d",
  "#4f146f",
  "#4f1570",
  "#4f1771",
  "#4e1972",
  "#4e1a73",
  "#4e1c75",
  "#4e1d76",
  "#4e1f77",
  "#4e2078",
  "#4e2179",
  "#4d237a",
  "#4d247b",
  "#4d267c",
  "#4d277d",
  "#4c297e",
  "#4c2a7f",
  "#4c2b80",
  "#4b2d81",
  "#4b2e82",
  "#4a2f82",
  "#4a3183",
  "#493284",
  "#493385",
  "#483585",
  "#483686",
  "#473787",
  "#473887",
  "#463a88",
  "#453b88",
  "#453c89",
  "#443e89",
  "#433f8a",
  "#42408a",
  "#42418b",
  "#41438b",
  "#40448c",
  "#3f458c",
  "#3e468d",
  "#3e478d",
  "#3d498d",
  "#3c4a8e",
  "#3b4b8e",
  "#3a4c8e",
  "#394d8e",
  "#384e8f",
  "#37508f",
  "#36518f",
  "#35528f",
  "#34538f",
  "#325490",
  "#315590",
  "#305690",
  "#2f5790",
  "#2e5990",
  "#2c5a90",
  "#2b5b91",
  "#2a5c91",
  "#285d91",
  "#275e91",
  "#255f91",
  "#246091",
  "#226191",
  "#216291",
  "#1f6391",
  "#1d6491",
  "#1b6591",
  "#196691",
  "#176791",
  "#156891",
  "#126991",
  "#0f6a91",
  "#0c6b91",
  "#086c91",
  "#046d91",
  "#006e91",
  "#006f91",
  "#007091",
  "#007191",
  "#007291",
  "#007391",
  "#007491",
  "#007591",
  "#007691",
  "#007791",
  "#007891",
  "#007991",
  "#007a91",
  "#007b91",
  "#007c91",
  "#007d91",
  "#007e91",
  "#007f91",
  "#008091",
  "#008191",
  "#008290",
  "#008390",
  "#008490",
  "#008590",
  "#008690",
  "#008790",
  "#008890",
  "#008990",
  "#008a8f",
  "#008a8f",
  "#008b8f",
  "#008c8f",
  "#008d8e",
  "#008e8e",
  "#008f8e",
  "#00908d",
  "#00918d",
  "#00928d",
  "#00928d",
  "#00938c",
  "#00948c",
  "#00958c",
  "#00968b",
  "#00978b",
  "#00988b",
  "#00998a",
  "#009a8a",
  "#009a8a",
  "#009b89",
  "#009c89",
  "#009d89",
  "#009e88",
  "#009f88",
  "#00a088",
  "#00a187",
  "#00a287",
  "#00a386",
  "#00a386",
  "#00a485",
  "#00a585",
  "#00a684",
  "#00a784",
  "#00a883",
  "#00a983",
  "#00aa82",
  "#00ab81",
  "#00ac81",
  "#00ad80",
  "#00ae7f",
  "#00af7f",
  "#00b07e",
  "#00b17d",
  "#00b27c",
  "#00b27c",
  "#00b37b",
  "#00b47a",
  "#00b579",
  "#00b678",
  "#00b777",
  "#00b875",
  "#00b974",
  "#00ba73",
  "#00bb72",
  "#00bc70",
  "#00bd6f",
  "#00be6d",
  "#00bf6c",
  "#00c06a",
  "#00c169",
  "#00c268",
  "#00c366",
  "#00c465",
  "#00c563",
  "#00c562",
  "#00c660",
  "#00c75f",
  "#00c85d",
  "#00c85b",
  "#00c95a",
  "#00ca58",
  "#00cb56",
  "#02cb54",
  "#12cc52",
  "#1ccd50",
  "#24ce4e",
  "#2bce4c",
  "#31cf4a",
  "#36d048",
  "#3bd046",
  "#40d143",
  "#45d241",
  "#49d23e",
  "#4ed33b",
  "#52d439",
  "#56d436",
  "#5ad533",
  "#5ed52f",
  "#62d62c",
  "#66d728",
  "#6ad724",
  "#6ed81f",
  "#71d819",
  "#75d913",
  "#79d90a",
  "#7cda00",
  "#80da00",
  "#84db00",
  "#87db00",
  "#8bdc00",
  "#8edc00",
  "#92dc00",
  "#95dd00",
  "#9d0",
  "#9cde00",
  "#a0de00",
  "#a3de00",
  "#a7df00",
  "#aadf00",
  "#aedf00",
  "#b1e000",
  "#b4e000",
  "#b8e000",
  "#bbe000",
  "#bfe100",
  "#c2e100",
  "#c5e100",
  "#c8e100",
  "#cce200",
  "#cfe200",
  "#d2e200",
  "#d5e200",
  "#d8e300",
  "#dbe300",
  "#dee300",
  "#e1e300",
  "#e4e400",
  "#e7e400",
  "#eae400",
  "#ede400",
  "#f0e500",
  "#f3e500",
  "#f6e500",
  "#f9e500",
  "#fce600",
  "#ffe600",
  "#ffe600"
];
console.log('colors.length', colors.length);
const colorsLength = colors.length;

Test runner

Ready to run.

Testing in
TestOps/sec
RGB Hex single value
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[0];
}
ready
RGB Hex 2 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 2];
}
ready
RGB Hex 4 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 4];
}
ready
RGB Hex 8 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 8];
}
ready
RGB Hex 16 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 16];
}
ready
RGB Hex 32 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 32];
}
ready
RGB Hex 64 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 64];
}
ready
RGB Hex 128 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 128];
}
ready
RGB Hex 256 values
for(let i = 0; i < colorsLength; i++) {
	context.fillStyle = colors[i % 256];
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.