html5 canvas circle palette

Question

i have source with circle palette, problem is palette have static size 250px x 250px, i need smaller 200px x 200px. At first sight code looks like messy, but don't need analyze converter functions like: HSB2RGB, RGB2HSB and etc.

    function HSB2RGB(j, d, c) {
        var e, g, l, h, k, b, a, m;
        if (c == 0) {
            return [0, 0, 0]
        }
        j *= 0.016666667;
        d *= 0.01;
        c *= 0.01;
        h = Math.floor(j);
        k = j - h;
        b = c * (1 - d);
        a = c * (1 - (d * k));
        m = c * (1 - (d * (1 - k)));
        switch (h) {
            case 0:
                e = c;
                g = m;
                l = b;
                break;
            case 1:
                e = a;
                g = c;
                l = b;
                break;
            case 2:
                e = b;
                g = c;
                l = m;
                break;
            case 3:
                e = b;
                g = a;
                l = c;
                break;
            case 4:
                e = m;
                g = b;
                l = c;
                break;
            case 5:
                e = c;
                g = b;
                l = a;
                break
        }
        return [e, g, l]
    }

    function RGB2HSB(c, d, k) {
        var j, h, e, g, b, a;
        j = Math.min(Math.min(c, d), k);
        a = Math.max(Math.max(c, d), k);
        if (j == a) {
            return [0, 0, a * 100]
        }
        h = (c == j) ? d - k : ((d == j) ? k - c : c - d);
        e = (c == j) ? 3 : ((d == j) ? 5 : 1);
        g = Math.floor((e - h / (a - j)) * 60) % 360;
        b = Math.floor(((a - j) / a) * 100);
        a = Math.floor(a * 100);
        return [g, b, a]
    }

    function ColorSelector(a) {
        this.init(a)
    }

    ColorSelector.prototype = {
        container: null,
        color: [0, 0, 0],
        hueSelector: null,
        luminosity: null,
        luminosityData: null,
        luminositySelector: null,
        luminosityPosition: null,
        dispatcher: null,
        changeEvent: null,

        init: function(k) {
            var m = this,
                b1, g2, d3;

            this.container = document.getElementById('mainDiv')
            this.container.addEventListener("mousedown", l, false);
            this.container.addEventListener("touchstart", f, false);


            g2 = document.getElementById('g2');
            g2.width = k.width;
            g2.height = k.height;

            b1 = g2.getContext("2d");
            b1.drawImage(k, 0, 0, g2.width, g2.height);
            d3 = b1.getImageData(0, 0, g2.width, g2.height).data;
            

            this.luminosity = document.getElementById('luminosity');
            this.hueSelector = document.getElementById('hue-selector');
            this.hueSelector.style.left = ((g2.width - 15) / 2) + "px";
            this.hueSelector.style.top = ((g2.height - 15) / 2) + "px";


            b1 = this.hueSelector.getContext("2d");
            b1.lineWidth = 2;
            b1.strokeStyle = "rgba(0, 0, 0, 0.5)";
            b1.beginPath();
            b1.arc(8, 8, 6, 0, Math.PI * 2, true);
            b1.stroke();
            b1.strokeStyle = "rgba(256, 256, 256, 0.8)";
            b1.beginPath();
            b1.arc(7, 7, 6, 0, Math.PI * 2, true);
            b1.stroke();
            
            this.luminosityPosition = [(k.width - 15), (k.height - 15) / 2];


            this.luminositySelector = document.getElementById('luminosity-selector');
            this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + "px";
            this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + "px";
            b1 = this.luminositySelector.getContext("2d");
            b1.drawImage(this.hueSelector, 0, 0, this.luminositySelector.width, this.luminositySelector.height);

            this.dispatcher = document.createElement("div");
            this.changeEvent = document.createEvent("Events");
            this.changeEvent.initEvent("change", true, true);

            function l(n) {
                window.addEventListener("mousemove", c, false);
                window.addEventListener("mouseup", h, false);
                e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
            }

            function c(n) {
                e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
            }

            function h(n) {
                window.removeEventListener("mousemove", c, false);
                window.removeEventListener("mouseup", h, false);
                e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
            }

            function f(n) {
                if (n.touches.length == 1) {
                    n.preventDefault();
                    window.addEventListener("touchmove", a, false);
                    window.addEventListener("touchend", j, false);
                    e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
                }
            }

            function a(n) {
                if (n.touches.length == 1) {
                    n.preventDefault();
                    e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
                }
            }

            function j(n) {
                if (n.touches.length == 0) {
                    n.preventDefault();
                    window.removeEventListener("touchmove", a, false);
                    window.removeEventListener("touchend", j, false)
                }
            }

            function e(o, t) {
                var q, p, r, n, s;
                q = o - 125;
                p = t - 125;
                r = Math.sqrt(q * q + p * p);
                if (r < 90) {
                    m.hueSelector.style.left = (o - 7) + "px";
                    m.hueSelector.style.top = (t - 7) + "px";
                    m.updateLuminosity([d3[(o + (t * 250)) * 4], d3[(o + (t * 250)) * 4 + 1], d3[(o + (t * 250)) * 4 + 2]])
                } else {
                    if (r > 100) {
                        n = q / r;
                        s = p / r;
                        m.luminosityPosition[0] = (n * 110) + 125;
                        m.luminosityPosition[1] = (s * 110) + 125;
                        m.luminositySelector.style.left = (m.luminosityPosition[0] - 7) + "px";
                        m.luminositySelector.style.top = (m.luminosityPosition[1] - 7) + "px"
                    }
                }
                o = Math.floor(m.luminosityPosition[0]);
                t = Math.floor(m.luminosityPosition[1]);
                m.color[0] = m.luminosityData[(o + (t * 250)) * 4];
                m.color[1] = m.luminosityData[(o + (t * 250)) * 4 + 1];
                m.color[2] = m.luminosityData[(o + (t * 250)) * 4 + 2];
                m.dispatchEvent(m.changeEvent)
            }
        },
        getColor: function() {
            return this.color
        },
        setColor: function(c) {
            var a, e, f, d, b = Math.PI / 180;
            this.color = c;
            a = RGB2HSB(c[0] / 255, c[1] / 255, c[2] / 255);
            e = a[0] * b;
            f = (a[1] / 100) * 90;
            this.hueSelector.style.left = ((Math.cos(e) * f + 125) - 7) + "px";
            this.hueSelector.style.top = ((Math.sin(e) * f + 125) - 7) + "px";
            d = HSB2RGB(a[0], a[1], 100);
            d[0] *= 255;
            d[1] *= 255;
            d[2] *= 255;
            this.updateLuminosity(d);
            e = (a[2] / 100) * 360 * b;
            this.luminosityPosition[0] = (Math.cos(e) * 110) + 125;
            this.luminosityPosition[1] = (Math.sin(e) * 110) + 125;
            this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + "px";
            this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + "px";
            this.dispatchEvent(this.changeEvent)
        },
        updateLuminosity: function(j) {
            var d, f, l, g, p, b, a, o = 100,
                h = 120,
                k, n = 1080 / 2,
                e = 1 / n,
                c = Math.PI / 180,
                m = (n / 360);
            b = this.luminosity.width / 2;
            a = this.luminosity.height / 2;
            d = this.luminosity.getContext("2d");
            d.lineWidth = 3;
            d.clearRect(0, 0, this.luminosity.width, this.luminosity.height);
            for (k = 0; k < n; k++) {
                f = k / m * c;
                l = Math.cos(f);
                g = Math.sin(f);
                p = 255 - (k * e) * 255;
                d.strokeStyle = "rgb(" + Math.floor(j[0] - p) + "," + Math.floor(j[1] - p) + "," + Math.floor(j[2] - p) + ")";
                d.beginPath();
                d.moveTo(l * o + b, g * o + a);
                d.lineTo(l * h + b, g * h + a);
                d.stroke()
            }
            this.luminosityData = d.getImageData(0, 0, this.luminosity.width, this.luminosity.height).data
        },
        addEventListener: function(b, c, a) {
            this.dispatcher.addEventListener(b, c, a)
        },
        dispatchEvent: function(a) {
            this.dispatcher.dispatchEvent(a)
        },
        removeEventListener: function(b, c, a) {
            this.dispatcher.removeEventListener(b, c, a)
        }
    };

    function Palette() {
        var canvas, canvasCtx, canvasHalfWidth, canvasHalfHeight, n = 90,
            m = 1080,
            f = 1 / m,
            l = m / 360,
            c = Math.PI / 180,
            j, h, k, g, canvasGradient;
        canvas = document.createElement("canvas");
        canvas.width = 250;
        canvas.height = 250;
        canvasHalfWidth = canvas.width / 2;
        canvasHalfHeight = canvas.height / 2;
        canvasCtx = canvas.getContext("2d");
        canvasCtx.lineWidth = 1;
        for (j = 0; j < m; j++) {
            h = j / l * c;
            k = Math.cos(h);
            g = Math.sin(h);
            canvasCtx.strokeStyle = "hsl(" + Math.floor((j * f) * 360) + ", 100%, 50%)";
            canvasCtx.beginPath();
            canvasCtx.moveTo(k + canvasHalfWidth, g + canvasHalfHeight);
            canvasCtx.lineTo(k * n + canvasHalfWidth, g * n + canvasHalfHeight);
            canvasCtx.stroke()
        }
        canvasGradient = canvasCtx.createRadialGradient(canvasHalfWidth, canvasHalfWidth, 0, canvasHalfWidth, canvasHalfWidth, n);
        canvasGradient.addColorStop(0, "rgba(255, 255, 255, 1)");
        canvasGradient.addColorStop(1, "rgba(255, 255, 255, 0)");
        canvasCtx.fillStyle = canvasGradient;
        canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
        return canvas
    }
    /* ADDED END */

    var SCREEN_WIDTH = window.innerWidth,
        SCREEN_HEIGHT = window.innerHeight,
        COLOR = [0, 0, 0],
        i,
        container, foregroundColorSelector, canvas, flattenCanvas, context;
    init();

    function init() {
        var hash, palette;
        container = document.createElement("div");

        document.body.appendChild(container);
        canvas = document.createElement("canvas");
        canvas.width = 250;//SCREEN_WIDTH;
        canvas.height = 250;//SCREEN_HEIGHT;
        canvas.style.cursor = "crosshair";
        container.appendChild(canvas);
        context = canvas.getContext("2d");
        palette = new Palette();
        foregroundColorSelector = new ColorSelector(palette);
        foregroundColorSelector.addEventListener("change", onForegroundColorSelectorChange, false);
        container.appendChild(foregroundColorSelector.container);

        foregroundColorSelector.setColor(COLOR);
        fillBox(COLOR);
    }

    function onForegroundColorSelectorChange(a) {
        fillBox(foregroundColorSelector.getColor());
    }

    function fillBox(color) {
        $('#selected-color').css('background-color', 'rgb('+color[0]+','+color[1]+','+color[2]+')');
    }

#mainDiv {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 125px;
    height: 125px; 
    cursor: pointer; 
    z-index: 3;
}

#luminosity {
    position: absolute; 
    left: 0px; 
    top: 0px;    
}

#hue-selector {
    position: absolute; 
}

#luminosity-selector {
    position: absolute; 
}

#selected-color {
    background-color: #000000; 
    width: 20px; 
    height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='mainDiv'>
            <canvas id='g2'></canvas>
            <canvas id='luminosity' width='250' height='250'></canvas>
            <canvas id='hue-selector' width='15' height='15'></canvas>
            <canvas id='luminosity-selector' width='15' height='15'></canvas>     
        </div>

<div id='selected-color'></div>

Answer 1

WHAT YEAR IS IT!?!?! Yeah, that took WAY too much effort...

But I did it! Just call init(200) and it will make a palette of size 200. It's default is 250 if you don't give it a size.

<html>
    <head>
        <style>
            #mainDiv {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 125px;
                height: 125px; 
                cursor: pointer; 
                z-index: 3;
            }

            #luminosity {
                position: absolute; 
                left: 0px; 
                top: 0px;    
            }

            #hue-selector {
                position: absolute; 
            }

            #luminosity-selector {
                position: absolute; 
            }

            #selected-color {
                background-color: #000000; 
                width: 20px; 
                height: 20px;
            }
        </style>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <div id='mainDiv'>
            <canvas id='g2'></canvas>
            <canvas id='luminosity'></canvas>
            <canvas id='hue-selector'></canvas>
            <canvas id='luminosity-selector'></canvas>     
        </div>

        <div id='selected-color'></div>
        <script>

var paletteSize = 100;

function HSB2RGB(j, d, c) {
    var e, g, l, h, k, b, a, m;
    if (c == 0) {
        return [0, 0, 0]
    }
    j *= 0.016666667;
    d *= 0.01;
    c *= 0.01;
    h = Math.floor(j);
    k = j - h;
    b = c * (1 - d);
    a = c * (1 - (d * k));
    m = c * (1 - (d * (1 - k)));
    switch (h) {
        case 0:
            e = c;
            g = m;
            l = b;
            break;
        case 1:
            e = a;
            g = c;
            l = b;
            break;
        case 2:
            e = b;
            g = c;
            l = m;
            break;
        case 3:
            e = b;
            g = a;
            l = c;
            break;
        case 4:
            e = m;
            g = b;
            l = c;
            break;
        case 5:
            e = c;
            g = b;
            l = a;
            break
    }
    return [e, g, l]
}

function RGB2HSB(c, d, k) {
    var j, h, e, g, b, a;
    j = Math.min(Math.min(c, d), k);
    a = Math.max(Math.max(c, d), k);
    if (j == a) {
        return [0, 0, a * 100]
    }
    h = (c == j) ? d - k : ((d == j) ? k - c : c - d);
    e = (c == j) ? 3 : ((d == j) ? 5 : 1);
    g = Math.floor((e - h / (a - j)) * 60) % 360;
    b = Math.floor(((a - j) / a) * 100);
    a = Math.floor(a * 100);
    return [g, b, a]
}

function ColorSelector(a) {
    this.init(a)
}

ColorSelector.prototype = {
    container: null,
    color: [0, 0, 0],
    hueSelector: null,
    luminosity: null,
    luminosityData: null,
    luminositySelector: null,
    luminosityPosition: null,
    dispatcher: null,
    changeEvent: null,

    init: function(k) {
        var m = this,
            b1, g2, d3;

        this.container = document.getElementById('mainDiv')
        this.container.addEventListener("mousedown", l, false);
        this.container.addEventListener("touchstart", f, false);


        g2 = document.getElementById('g2');
        g2.width = k.width;
        g2.height = k.height;

        b1 = g2.getContext("2d");
        b1.drawImage(k, 0, 0, g2.width, g2.height);
        d3 = b1.getImageData(0, 0, g2.width, g2.height).data;


        this.luminosity = document.getElementById('luminosity');
        this.hueSelector = document.getElementById('hue-selector');
        this.hueSelector.style.left = ((g2.width - paletteSize*15/250) / 2) + "px";
        this.hueSelector.style.top = ((g2.height - paletteSize*15/250) / 2) + "px";


        b1 = this.hueSelector.getContext("2d");
        b1.lineWidth = 2;
        b1.strokeStyle = "rgba(0, 0, 0, 0.5)";
        b1.beginPath();
        b1.arc(paletteSize*8/250, paletteSize*8/250, paletteSize*6/250, 0, Math.PI * 2, true);
        b1.stroke();
        b1.strokeStyle = "rgba(256, 256, 256, 0.8)";
        b1.beginPath();
        b1.arc(paletteSize*7/250, paletteSize*7/250, paletteSize*6/250, 0, Math.PI * 2, true);
        b1.stroke();

        this.luminosityPosition = [(k.width - paletteSize*15/250), (k.height - paletteSize*15/250) / 2];


        this.luminositySelector = document.getElementById('luminosity-selector');
        this.luminositySelector.style.left = (this.luminosityPosition[0] - paletteSize*7/250) + "px";
        this.luminositySelector.style.top = (this.luminosityPosition[1] - paletteSize*7/250) + "px";
        b1 = this.luminositySelector.getContext("2d");
        b1.drawImage(this.hueSelector, 0, 0, this.luminositySelector.width, this.luminositySelector.height);

        this.dispatcher = document.createElement("div");
        this.changeEvent = document.createEvent("Events");
        this.changeEvent.initEvent("change", true, true);

        function l(n) {
            window.addEventListener("mousemove", c, false);
            window.addEventListener("mouseup", h, false);
            e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
        }

        function c(n) {
            e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
        }

        function h(n) {
            window.removeEventListener("mousemove", c, false);
            window.removeEventListener("mouseup", h, false);
            e(n.clientX - m.container.offsetLeft, n.clientY - m.container.offsetTop)
        }

        function f(n) {
            if (n.touches.length == 1) {
                n.preventDefault();
                window.addEventListener("touchmove", a, false);
                window.addEventListener("touchend", j, false);
                e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
            }
        }

        function a(n) {
            if (n.touches.length == 1) {
                n.preventDefault();
                e(n.touches[0].pageX - m.container.offsetLeft, n.touches[0].pageY - m.container.offsetTop)
            }
        }

        function j(n) {
            if (n.touches.length == 0) {
                n.preventDefault();
                window.removeEventListener("touchmove", a, false);
                window.removeEventListener("touchend", j, false)
            }
        }

        function e(o, t) {
            var q, p, r, n, s;
            q = o - paletteSize/2;
            p = t - paletteSize/2;
            r = Math.sqrt(q * q + p * p);
            if (r < paletteSize*90/250) {
                m.hueSelector.style.left = (o - paletteSize*7/250) + "px";
                m.hueSelector.style.top = (t - paletteSize*7/250) + "px";
                m.updateLuminosity([d3[(o + (t * paletteSize)) * 4], d3[(o + (t * paletteSize)) * 4 + 1], d3[(o + (t * paletteSize)) * 4 + 2]])
            } else {
                if (r > paletteSize*100/250) {
                    n = q / r;
                    s = p / r;
                    m.luminosityPosition[0] = (n * paletteSize*110/250) + paletteSize/2;
                    m.luminosityPosition[1] = (s * paletteSize*110/250) + paletteSize/2;
                    m.luminositySelector.style.left = (m.luminosityPosition[0] - paletteSize*7/250) + "px";
                    m.luminositySelector.style.top = (m.luminosityPosition[1] - paletteSize*7/250) + "px"
                }
            }
            o = Math.floor(m.luminosityPosition[0]);
            t = Math.floor(m.luminosityPosition[1]);
            m.color[0] = m.luminosityData[(o + (t * paletteSize)) * 4];
            m.color[1] = m.luminosityData[(o + (t * paletteSize)) * 4 + 1];
            m.color[2] = m.luminosityData[(o + (t * paletteSize)) * 4 + 2];
            m.dispatchEvent(m.changeEvent)
        }
    },
    getColor: function() {
        return this.color
    },
    setColor: function(c) {
        var a, e, f, d, b = Math.PI / 180;
        this.color = c;
        a = RGB2HSB(c[0] / 255, c[1] / 255, c[2] / 255);
        e = a[0] * b;
        f = (a[1] / 100) * 90;
        this.hueSelector.style.left = ((Math.cos(e) * f + paletteSize/2) - 7) + "px";
        this.hueSelector.style.top = ((Math.sin(e) * f + paletteSize/2) - paletteSize*7/250) + "px";
        d = HSB2RGB(a[0], a[1], 100);
        d[0] *= 255;
        d[1] *= 255;
        d[2] *= 255;
        this.updateLuminosity(d);
        e = (a[2] / 100) * 360 * b;
        this.luminosityPosition[0] = (Math.cos(e) * paletteSize*110/250) + paletteSize/2;
        this.luminosityPosition[1] = (Math.sin(e) * paletteSize*110/250) + paletteSize/2;
        this.luminositySelector.style.left = (this.luminosityPosition[0] - paletteSize*7/250) + "px";
        this.luminositySelector.style.top = (this.luminosityPosition[1] - paletteSize*7/250) + "px";
        this.dispatchEvent(this.changeEvent)
    },
    updateLuminosity: function(j) {
        var d, f, l, g, p, b, a, o = paletteSize*100/250,
            h = paletteSize*120/250,
            k, n = paletteSize*1080/250 / 2,
            e = 1 / n,
            c = Math.PI / 180,
            m = (n / 360);
        b = this.luminosity.width / 2;
        a = this.luminosity.height / 2;
        d = this.luminosity.getContext("2d");
        d.lineWidth = 3;
        d.clearRect(0, 0, this.luminosity.width, this.luminosity.height);
        for (k = 0; k < n; k++) {
            f = k / m * c;
            l = Math.cos(f);
            g = Math.sin(f);
            p = 255 - (k * e) * 255;
            d.strokeStyle = "rgb(" + Math.floor(j[0] - p) + "," + Math.floor(j[1] - p) + "," + Math.floor(j[2] - p) + ")";
            d.beginPath();
            d.moveTo(l * o + b, g * o + a);
            d.lineTo(l * h + b, g * h + a);
            d.stroke()
        }
        this.luminosityData = d.getImageData(0, 0, this.luminosity.width, this.luminosity.height).data
    },
    addEventListener: function(b, c, a) {
        this.dispatcher.addEventListener(b, c, a)
    },
    dispatchEvent: function(a) {
        this.dispatcher.dispatchEvent(a)
    },
    removeEventListener: function(b, c, a) {
        this.dispatcher.removeEventListener(b, c, a)
    }
};

function Palette() {
    var canvas, canvasCtx, canvasHalfWidth, canvasHalfHeight, n = paletteSize*90/250,
        m = 1080,
        f = 1 / m,
        l = m / 360,
        c = Math.PI / 180,
        j, h, k, g, canvasGradient;
    canvas = document.createElement("canvas");
    canvas.width = paletteSize;
    canvas.height = paletteSize;
    canvasHalfWidth = canvas.width / 2;
    canvasHalfHeight = canvas.height / 2;
    canvasCtx = canvas.getContext("2d");
    canvasCtx.lineWidth = 1;
    for (j = 0; j < m; j++) {
        h = j / l * c;
        k = Math.cos(h);
        g = Math.sin(h);
        canvasCtx.strokeStyle = "hsl(" + Math.floor((j * f) * 360) + ", 100%, 50%)";
        canvasCtx.beginPath();
        canvasCtx.moveTo(k + canvasHalfWidth, g + canvasHalfHeight);
        canvasCtx.lineTo(k * n + canvasHalfWidth, g * n + canvasHalfHeight);
        canvasCtx.stroke()
    }
    canvasGradient = canvasCtx.createRadialGradient(canvasHalfWidth, canvasHalfWidth, 0, canvasHalfWidth, canvasHalfWidth, n);
    canvasGradient.addColorStop(0, "rgba(255, 255, 255, 1)");
    canvasGradient.addColorStop(1, "rgba(255, 255, 255, 0)");
    canvasCtx.fillStyle = canvasGradient;
    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
    return canvas
}
/* ADDED END */

var SCREEN_WIDTH = window.innerWidth,
    SCREEN_HEIGHT = window.innerHeight,
    COLOR = [0, 0, 0],
    i,
    container, foregroundColorSelector, canvas, flattenCanvas, context;
init();

function init(newPaletteSize) {

    paletteSize = newPaletteSize || 250;

    var mainDiv = document.getElementById('mainDiv');
    mainDiv.width = paletteSize/2;
    mainDiv.height = paletteSize/2;

    var luminosity = document.getElementById('luminosity');
    luminosity.width = paletteSize;
    luminosity.height = paletteSize;

    var hueselector = document.getElementById('hue-selector');
    hueselector.width = paletteSize*15/250;
    hueselector.height = paletteSize*15/250;

    var luminosityselector = document.getElementById('luminosity-selector');
    luminosityselector.width = paletteSize*15/250;
    luminosityselector.height = paletteSize*15/250;

    var selectedcolor = document.getElementById('selected-color');
    selectedcolor.style.width = paletteSize*20/250;
    selectedcolor.style.height = paletteSize*20/250;

    var hash, palette;
    container = document.createElement("div");

    document.body.appendChild(container);
    canvas = document.createElement("canvas");
    canvas.width = paletteSize;//SCREEN_WIDTH;
    canvas.height = paletteSize;//SCREEN_HEIGHT;
    canvas.style.cursor = "crosshair";
    container.appendChild(canvas);
    context = canvas.getContext("2d");
    palette = new Palette();
    foregroundColorSelector = new ColorSelector(palette);
    foregroundColorSelector.addEventListener("change", onForegroundColorSelectorChange, false);
    container.appendChild(foregroundColorSelector.container);

    foregroundColorSelector.setColor(COLOR);
    fillBox(COLOR);
}

function onForegroundColorSelectorChange(a) {
    fillBox(foregroundColorSelector.getColor());
}

function fillBox(color) {
    $('#selected-color').css('background-color', 'rgb('+color[0]+','+color[1]+','+color[2]+')');
}
        </script>
    </body>
</html>

Answer 2

I made a comment about it, but I'll try and make an answer too.

Basically, your main issue here is that this code wasn't written to be flexible. It was written to have a very specific size and your code always assumes that the size isn't changing. To manipulate the size of the Palette, you will have to replace EVERY instance of a hard coded value (or "magic number") that is related to a size. You need to update your code to be a bit more "dynamic."

You can simply pass Palette a size. In order to establish an initial size for the palette to take. Example: palette = new Palette(200);

Of course you have to update the Palette function

function Palette(paletteSize) {
    ...
    /* Previously *
    canvas.width = 250;
    canvas.height = 250;

    /* Now it is */
    canvas.width = paletteSize;
    canvas.height = paletteSize;
    ...
}

And the rest of the code too.

For example, a snippet from the updateLuminosity function:

...
var d, f, l, g, p, b, a, o = 100,
    h = 120,
    k, n = 1080 / 2,
    e = 1 / n,
    c = Math.PI / 180,
    m = (n / 360);
    b = this.luminosity.width / 2;
    a = this.luminosity.height / 2;

d.moveTo(l * o + b, g * o + a);
d.lineTo(l * h + b, g * h + a);
...

As far as I can tell, o and h are the inner and outer radii, respectively, of the luminosity ring. You would have to change those values to something to the effect of o = paletteSize*100/250. You have already selected a preferred luminosity ring according to the size of the palette (100 for a palette of 250). Multiplying 100/250 by paletteSize will always retain that ratio. You can apply this principle to other variables that represent dimensions in order to quickly update your code base without compromising the current layout.

Hopefully this gives you a good enough idea of what to change. Best of luck!

EDIT: I have a page that demonstrates the "flexibility of dynamic sizing." Open this in a new window and Re-size the height and width.