@radial-color-picker/angular-color-picker/esm2015/lib/helpers/color-gradient.js

Radial Color Picker - Angular

/**
 * Modified version of Lea Verou's
 * {@link https://github.com/leaverou/conic-gradient conic-gradient}.
 *
 * @example
 * paintColorWheelToCanvas(document.querySelector('#canvas'), 250);
 *
 * @param canvas Canvas to paint the color wheel
 * @param size   Color wheel diameter in pixels
 * @returns canvas The passed canvas for easier chaining
 */
export const paintColorWheelToCanvas = (canvas, size) => {
    const half = size / 2;
    const radius = Math.sqrt(2) * half;
    const deg = Math.PI / 180;
    const pi2 = Math.PI * 2;
    canvas.width = canvas.height = size;
    const ctx = canvas.getContext('2d');
    // .02: To prevent empty blank line and corresponding moire
    // only non-alpha colors are cared now
    const thetaOffset = 0.5 * deg + 0.02;
    // Transform coordinate system so that angles start from the top left, like in CSS
    ctx.translate(half, half);
    ctx.rotate(-Math.PI / 2);
    ctx.translate(-half, -half);
    for (let i = 0; i < 360; i += 0.5) {
        ctx.fillStyle = `hsl(${i}, 100%, 50%)`;
        ctx.beginPath();
        ctx.moveTo(half, half);
        const beginArg = i * deg;
        const endArg = Math.min(pi2, beginArg + thetaOffset);
        ctx.arc(half, half, radius, beginArg, endArg);
        ctx.closePath();
        ctx.fill();
    }
    return canvas;
};
/**
 *
 * @param canvas Canvas to paint the color wheel
 * @param diameter Color wheel diameter in pixels
 * @param coefficient Relation between inner white circle outer border and color circle outer border, controls the width of the color gradient path
 * @returns canvas The passed canvas for easier chaining
 */
export const renderColorMap = (canvas, diameter, coefficient = 0.77) => {
    canvas.width = canvas.height = diameter;
    const radius = diameter / 2;
    const toRad = (2 * Math.PI) / 360;
    const step = 0.2;
    const aliasing = 1;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, diameter, diameter);
    for (let i = 0; i < 360; i += step) {
        const sRad = (i - aliasing) * toRad;
        const eRad = (i + step) * toRad;
        ctx.beginPath();
        ctx.arc(radius, radius, radius / 2, sRad, eRad, false);
        ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
        ctx.lineWidth = radius;
        ctx.closePath();
        ctx.stroke();
    }
    ctx.fillStyle = 'rgb(255, 255, 255)';
    ctx.beginPath();
    ctx.arc(radius, radius, radius * coefficient, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fill();
    ctx.strokeStyle = 'rgb(255, 255, 255)';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
    ctx.stroke();
    return canvas;
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sb3ItZ3JhZGllbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AcmFkaWFsLWNvbG9yLXBpY2tlci9hbmd1bGFyLWNvbG9yLXBpY2tlci8iLCJzb3VyY2VzIjpbImxpYi9oZWxwZXJzL2NvbG9yLWdyYWRpZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7O0dBVUc7QUFDSCxNQUFNLENBQUMsTUFBTSx1QkFBdUIsR0FBRyxDQUFDLE1BQXlCLEVBQUUsSUFBWSxFQUFxQixFQUFFO0lBQ3BHLE1BQU0sSUFBSSxHQUFHLElBQUksR0FBRyxDQUFDLENBQUM7SUFDdEIsTUFBTSxNQUFNLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUM7SUFDbkMsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxHQUFHLENBQUM7SUFDMUIsTUFBTSxHQUFHLEdBQUcsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFFeEIsTUFBTSxDQUFDLEtBQUssR0FBRyxNQUFNLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztJQUNwQyxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBRXBDLDJEQUEyRDtJQUMzRCxzQ0FBc0M7SUFDdEMsTUFBTSxXQUFXLEdBQUcsR0FBRyxHQUFHLEdBQUcsR0FBRyxJQUFJLENBQUM7SUFFckMsa0ZBQWtGO0lBQ2xGLEdBQUcsQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQzFCLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQyxDQUFDO0lBQ3pCLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUU1QixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsR0FBRyxFQUFFLENB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QUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQ2hELEdBQUcsQ0FBQyxNQUFNLEVBQUUsQ0FBQztJQUdiLE9BQU8sTUFBTSxDQUFDO0FBQ2hCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxyXG4gKiBNb2RpZmllZCB2ZXJzaW9uIG9mIExlYSBWZXJvdSdzXHJcbiAqIHtAbGluayBodHRwczovL2dpdGh1Yi5jb20vbGVhdmVyb3UvY29uaWMtZ3JhZGllbnQgY29uaWMtZ3JhZGllbnR9LlxyXG4gKlxyXG4gKiBAZXhhbXBsZVxyXG4gKiBwYWludENvbG9yV2hlZWxUb0NhbnZhcyhkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjY2FudmFzJyksIDI1MCk7XHJcbiAqXHJcbiAqIEBwYXJhbSBjYW52YXMgQ2FudmFzIHRvIHBhaW50IHRoZSBjb2xvciB3aGVlbFxyXG4gKiBAcGFyYW0gc2l6ZSAgIENvbG9yIHdoZWVsIGRpYW1ldGVyIGluIHBpeGVsc1xyXG4gKiBAcmV0dXJucyBjYW52YXMgVGhlIHBhc3NlZCBjYW52YXMgZm9yIGVhc2llciBjaGFpbmluZ1xyXG4gKi9cclxuZXhwb3J0IGNvbnN0IHBhaW50Q29sb3JXaGVlbFRvQ2FudmFzID0gKGNhbnZhczogSFRNTENhbnZhc0VsZW1lbnQsIHNpemU6IG51bWJlcik6IEhUTUxDYW52YXNFbGVtZW50ID0+IHtcclxuICBjb25zdCBoYWxmID0gc2l6ZSAvIDI7XHJcbiAgY29uc3QgcmFkaXVzID0gTWF0aC5zcXJ0KDIpICogaGFsZjtcclxuICBjb25zdCBkZWcgPSBNYXRoLlBJIC8gMTgwO1xyXG4gIGNvbnN0IHBpMiA9IE1hdGguUEkgKiAyO1xyXG5cclxuICBjYW52YXMud2lkdGggPSBjYW52YXMuaGVpZ2h0ID0gc2l6ZTtcclxuICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTtcclxuXHJcbiAgLy8gLjAyOiBUbyBwcmV2ZW50IGVtcHR5IGJsYW5rIGxpbmUgYW5kIGNvcnJlc3BvbmRpbmcgbW9pcmVcclxuICAvLyBvbmx5IG5vbi1hbHBoYSBjb2xvcnMgYXJlIGNhcmVkIG5vd1xyXG4gIGNvbnN0IHRoZXRhT2Zmc2V0ID0gMC41ICogZGVnICsgMC4wMjtcclxuXHJcbiAgLy8gVHJhbnNmb3JtIGNvb3JkaW5hdGUgc3lzdGVtIHNvIHRoYXQgYW5nbGVzIHN0YXJ0IGZyb20gdGhlIHRvcCBsZWZ0LCBsaWtlIGluIENTU1xyXG4gIGN0eC50cmFuc2xhdGUoaGFsZiwgaGFsZik7XHJcbiAgY3R4LnJvdGF0ZSgtTWF0aC5QSSAvIDIpO1xyXG4gIGN0eC50cmFuc2xhdGUoLWhhbGYsIC1oYWxmKTtcclxuXHJcbiAgZm9yIChsZXQgaSA9IDA7IGkgPCAzNjA7IGkgKz0gMC41KSB7XHJcbiAgICBjdHguZmlsbFN0eWxlID0gYGhzbCgke2l9LCAxMDAlLCA1MCUpYDtcclxuICAgIGN0eC5iZWdpblBhdGgoKTtcclxuICAgIGN0eC5tb3ZlVG8oaGFsZiwgaGFsZik7XHJcblxyXG4gICAgY29uc3QgYmVnaW5BcmcgPSBpICogZGVnO1xyXG4gICAgY29uc3QgZW5kQXJnID0gTWF0aC5taW4ocGkyLCBiZWdpbkFyZyArIHRoZXRhT2Zmc2V0KTtcclxuXHJcbiAgICBjdHguYXJjKGhhbGYsIGhhbGYsIHJhZGl1cywgYmVnaW5BcmcsIGVuZEFyZyk7XHJcblxyXG4gICAgY3R4LmNsb3NlUGF0aCgpO1xyXG4gICAgY3R4LmZpbGwoKTtcclxuICB9XHJcblxyXG4gIHJldHVybiBjYW52YXM7XHJcbn07XHJcblxyXG4vKipcclxuICpcclxuICogQHBhcmFtIGNhbnZhcyBDYW52YXMgdG8gcGFpbnQgdGhlIGNvbG9yIHdoZWVsXHJcbiAqIEBwYXJhbSBkaWFtZXRlciBDb2xvciB3aGVlbCBkaWFtZXRlciBpbiBwaXhlbHNcclxuICogQHBhcmFtIGNvZWZmaWNpZW50IFJlbGF0aW9uIGJldHdlZW4gaW5uZXIgd2hpdGUgY2lyY2xlIG91dGVyIGJvcmRlciBhbmQgY29sb3IgY2lyY2xlIG91dGVyIGJvcmRlciwgY29udHJvbHMgdGhlIHdpZHRoIG9mIHRoZSBjb2xvciBncmFkaWVudCBwYXRoXHJcbiAqIEByZXR1cm5zIGNhbnZhcyBUaGUgcGFzc2VkIGNhbnZhcyBmb3IgZWFzaWVyIGNoYWluaW5nXHJcbiAqL1xyXG5leHBvcnQgY29uc3QgcmVuZGVyQ29sb3JNYXAgPSAoY2FudmFzOiBIVE1MQ2FudmFzRWxlbWVudCwgZGlhbWV0ZXI6IG51bWJlciwgY29lZmZpY2llbnQ6IG51bWJlciA9IDAuNzcpOiBIVE1MQ2FudmFzRWxlbWVudCA9PiB7XHJcbiAgY2FudmFzLndpZHRoID0gY2FudmFzLmhlaWdodCA9IGRpYW1ldGVyO1xyXG4gIGNvbnN0IHJhZGl1cyA9IGRpYW1ldGVyIC8gMjtcclxuICBjb25zdCB0b1JhZCA9ICgyICogTWF0aC5QSSkgLyAzNjA7XHJcbiAgY29uc3Qgc3RlcCA9IDAuMjtcclxuICBjb25zdCBhbGlhc2luZyA9IDE7XHJcblxyXG5cclxuICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTtcclxuICBjdHguY2xlYXJSZWN0KDAsIDAsIGRpYW1ldGVyLCBkaWFtZXRlcik7XHJcbiAgZm9yIChsZXQgaSA9IDA7IGkgPCAzNjA7IGkgKz0gc3RlcCkge1xyXG4gICAgY29uc3Qgc1JhZCA9IChpIC0gYWxpYXNpbmcpICogdG9SYWQ7XHJcbiAgICBjb25zdCBlUmFkID0gKGkgKyBzdGVwKSAqIHRvUmFkO1xyXG4gICAgY3R4LmJlZ2luUGF0aCgpO1xyXG4gICAgY3R4LmFyYyhyYWRpdXMsIHJhZGl1cywgcmFkaXVzIC8gMiwgc1JhZCwgZVJhZCwgZmFsc2UpO1xyXG4gICAgY3R4LnN0cm9rZVN0eWxlID0gJ2hzbCgnICsgaSArICcsIDEwMCUsIDUwJSknO1xyXG4gICAgY3R4LmxpbmVXaWR0aCA9IHJhZGl1cztcclxuICAgIGN0eC5jbG9zZVBhdGgoKTtcclxuICAgIGN0eC5zdHJva2UoKTtcclxuICB9XHJcblxyXG4gIGN0eC5maWxsU3R5bGUgPSAncmdiKDI1NSwgMjU1LCAyNTUpJztcclxuICBjdHguYmVnaW5QYXRoKCk7XHJcbiAgY3R4LmFyYyhyYWRpdXMsIHJhZGl1cywgcmFkaXVzICogY29lZmZpY2llbnQsIDAsIE1hdGguUEkgKiAyLCB0cnVlKTtcclxuICBjdHguY2xvc2VQYXRoKCk7XHJcbiAgY3R4LmZpbGwoKTtcclxuXHJcbiAgY3R4LnN0cm9rZVN0eWxlID0gJ3JnYigyNTUsIDI1NSwgMjU1KSc7XHJcbiAgY3R4LmxpbmVXaWR0aCA9IDI7XHJcbiAgY3R4LmJlZ2luUGF0aCgpO1xyXG4gIGN0eC5hcmMocmFkaXVzLCByYWRpdXMsIHJhZGl1cywgMCwgMiAqIE1hdGguUEkpO1xyXG4gIGN0eC5zdHJva2UoKTtcclxuXHJcblxyXG4gIHJldHVybiBjYW52YXM7XHJcbn07XHJcbiJdfQ==