Run results for: Js Canvas color pick 2

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15

Browser: Safari 15

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Pick color by getImageData()	21482.6 Ops/sec
pick color by hsv	186900.3 Ops/sec

HTML Preparation code:

<canvas id="colorPalette" width="228" height="228"></canvas>

Script Preparation code:

var colorPaletteCTX = document.getElementById('colorPalette').getContext('2d');
var boundry = document.getElementById('colorPalette').getBoundingClientRect();

if (colorPaletteCTX) {
    const {
        width,
        height
    } = colorPaletteCTX.canvas;
    colorPaletteCTX.clearRect(0, 0, width, height);
    const gradientH = colorPaletteCTX.createLinearGradient(0, 0, width, 0);
    gradientH.addColorStop(0, 'rgba(255,255,255,1)');
    gradientH.addColorStop(1, 'rgba(255,0,0,1)');
    colorPaletteCTX.fillStyle = gradientH;
    colorPaletteCTX.fillRect(0, 0, width, height);

    const gradientV = colorPaletteCTX.createLinearGradient(0, 0, 0, height);
    gradientV.addColorStop(0, 'rgba(0,0,0,0)');
    gradientV.addColorStop(1, 'rgba(0,0,0,1)');
    colorPaletteCTX.fillStyle = gradientV;
    colorPaletteCTX.fillRect(0, 0, width, height);
}

function clamp(value, min, max) {
    return Math.max(0, Math.min(1, value - min / max - min));
};

function rgb2Hex(red, green, blue) {
    let _r = red.toString(16);
    let _g = green.toString(16);
    let _b = blue.toString(16);

    // prepend 0s if necessary
    if (_r.length === 1) _r = '0' + _r;
    if (_g.length === 1) _g = '0' + _g;
    if (_b.length === 1) _b = '0' + _b;

    return `#${_r}${_g}${_b}`;
};

function hsv2Rgb(hue, sat, val) {
    const f = (n, k = (n + hue / 60) % 6) =>
        val - val * sat * Math.max(Math.min(k, 4 - k, 1), 0);
    return [
        Math.round(f(5) * 255),
        Math.round(f(3) * 255),
        Math.round(f(1) * 255),
    ];
};

function hsv2Hex(hue, sat, val) {
    const [r, g, b] = hsv2Rgb(hue, sat, val);
    return rgb2Hex(r, g, b);
};

function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Tests:

Pick color by getImageData()
const x = randomInteger(0,227); const y = randomInteger(0,227); const pixel = colorPaletteCTX.getImageData(x, y, 1, 1)["data"]; console.log(rgb2Hex(pixel[0], pixel[1], pixel[2]));
pick color by hsv
const { top, left, width, height, } = boundry; const x = randomInteger(0,227); const y = randomInteger(0,227); console.log(hsv2Hex(0, clamp(Math.max(0, x - left) / width, 0, 1), clamp((height - Math.max(0, y - top)) / height, 0, 1)));

Run results for: Js Canvas color pick 2

Pick color by getImageData()

pick color by hsv