HTML5 Canvas circle palette need custom size

Question

I have palette with static size i need made it smaller or bigger, can anybode help me i try to found where i can change values, bad result is bad. This is shorter version, full version is: https://github.com/nilium/harmony

/* PALETTE.JS */
function Palette()
{
    var canvas, context, offsetx, offsety, radius = 90,
    count = 1080, oneDivCount = 1 / count, countDiv360 = count / 360, degreesToRadians = Math.PI / 180,
    i, angle, angle_cos, angle_sin, gradient;

    canvas = document.createElement("canvas");
    canvas.width = 250;
    canvas.height = 250;

    offsetx = canvas.width / 2;
    offsety = canvas.height / 2;

    context = canvas.getContext("2d");
    context.lineWidth = 1;

    // http://www.boostworthy.com/blog/?p=226

    for(i = 0; i < count; i++)
    {
        angle = i / countDiv360 * degreesToRadians;
        angle_cos = Math.cos(angle);
        angle_sin = Math.sin(angle);

        context.strokeStyle = "hsl(" + Math.floor( (i * oneDivCount) * 360 ) + ", 100%, 50%)";
        context.beginPath();
        context.moveTo(angle_cos + offsetx, angle_sin + offsety);
        context.lineTo(angle_cos * radius + offsetx, angle_sin * radius + offsety);
        context.stroke();
    }

    gradient = context.createRadialGradient(offsetx, offsetx, 0, offsetx, offsetx, radius);
    gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');

    context.fillStyle = gradient;
    context.fillRect(0, 0, canvas.width, canvas.height);

    return canvas;
}



/* COLORSELECTOR.JS */
function ColorSelector( gradient )
{
    this.init( gradient );
}

ColorSelector.prototype =
{
    container: null,

    gradientContainer: null,
    color: [0, 0, 0],

    hueInput: null,
    saturationInput: null,
    luminosityInput: null,

    hue: null,
    hueSelector: null,

    luminosity: null,
    luminositySelector: null,
    luminosityData: null,

    luminosityPosition: null,

    dispatcher: null,
    changeEvent: null,

    areaDelta: 0,

    init: function(gradient)
    {
        /* DEFINES */
        var scope = this, context, hue, hueData;

        this.container =  document.getElementById('container');
        this.gradientContainer =  document.getElementById('gradient-container');
        this.luminosity = document.getElementById('luminosity');
        this.hue = document.getElementById('hue');
        this.hueSelector = document.getElementById('hue-selector');
        this.luminositySelector =  document.getElementById('luminosity-selector');

        /* OTHER ASSIGNS */
        this.hue.width = gradient.width;
        this.hue.height = gradient.height;

        this.hueSelector.style.left = ((this.hue.width - 15) / 2 ) + 'px';
        this.hueSelector.style.top = ((this.hue.height - 15) / 2 ) + 'px';

        this.luminosityPosition = [ (gradient.width - 15), (gradient.height - 15) / 2 ];
        this.luminositySelector.style.left = (this.luminosityPosition[0] - 7) + 'px';
        this.luminositySelector.style.top = (this.luminosityPosition[1] - 7) + 'px';
        

        /* INITS */
        drawSelectorCircles(this.hueSelector.getContext("2d"));

        contextHue = this.hue.getContext("2d");
        contextHue.drawImage(gradient, 0, 0, this.hue.width, this.hue.height);
        hueData = contextHue.getImageData(0, 0, this.hue.width, this.hue.height).data;

        contextLum = this.luminositySelector.getContext("2d");
        contextLum.drawImage(this.hueSelector, 0, 0, this.luminositySelector.width, this.luminositySelector.height);


        /* OTHER */
        this.dispatcher = document.createElement('div'); // this could be better handled...
        this.changeEvent = document.createEvent('Events');
        this.changeEvent.initEvent('change', true, true);

        this.gradientContainer.addEventListener('mousedown', onMouseDown, false);
        
        function drawSelectorCircles(ctx) {
            ctx.lineWidth = 2;
            ctx.strokeStyle = "rgba(0, 0, 0, 0.5)";
            ctx.beginPath();
            ctx.arc(8, 8, 6, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.strokeStyle = "rgba(256, 256, 256, 0.8)";
            ctx.beginPath();
            ctx.arc(7, 7, 6, 0, Math.PI * 2, true);
            ctx.stroke();   
        }

        function onMouseDown( event )
        {
            window.addEventListener('mousemove', onMouseMove, false);
            window.addEventListener('mouseup', onMouseUp, false);

            update( event.clientX - scope.container.offsetLeft, event.clientY - scope.container.offsetTop, true );
        }

        function onMouseMove( event )
        {
            update( event.clientX - scope.container.offsetLeft, event.clientY - scope.container.offsetTop, false );
        }

        function onMouseUp( event )
        {
            window.removeEventListener('mousemove', onMouseMove, false);
            window.removeEventListener('mouseup', onMouseUp, false);

            update( event.clientX - scope.container.offsetLeft, event.clientY - scope.container.offsetTop, false );
        }
        //

        function updateColorInputs()
        {
            var hsv = [0,0,0];
            var r=scope.color[0], g=scope.color[1], b=scope.color[2];
            var mn, mx, dif, ad, dv, md;
            mn = Math.min(r, g, b);
            mx = Math.max(r, g, b);
            if (r > g && r > b) {
                dif = g - b;
                ad = 0;
            } else if (g > b) {
                dif = b - r;
                ad = 120;
            } else {
                dif = r - g;
                ad = 240;
            }

            md = mx - mn;
            var mdt = 0;
            if (md != 0) {
                mdt = 1.0 / md;
            }

            var mxt = 0;
            if (mx != 0) {
                mxt = 1.0 / mx;
            }


            hsv[0] = 60 * (dif * mdt) + ad;
            if (hsv[0] < 0) {
                hsv[0] = 360 + hsv[0];
            }
            hsv[1] = md * mxt;
            hsv[2] = mx;

            scope.hueInput = Math.floor(hsv[0]);
            scope.saturationInput = Math.floor(hsv[1] * 100);
            scope.luminosityInput = Math.floor(hsv[2] / 2.56);
        }

        function update(x, y, began)
        {
            var dx, dy, d, nx, ny;

            dx = x - 125;
            dy = y - 125;
            d = Math.sqrt( dx * dx + dy * dy );

            if (began) {
                scope.areaDelta = d;
            }

            var pickHue = 0;
            if (scope.areaDelta < 90) {
                pickHue = 1;
            } else if (scope.areaDelta > 100) {
                pickHue = 2;
            }

            if (pickHue == 1)
            {
                if (d > 89.5) {
                    var scale = d / 89.5;
                    dx = Math.floor(dx / scale);
                    dy = Math.floor(dy / scale);

                    x = dx + 125;
                    y = dy + 125;
                    d = 89.5;
                }

                scope.hueSelector.style.left = (x - 7) + 'px';
                scope.hueSelector.style.top = (y - 7) + 'px';
                var index = (x + (y * 250)) * 4;
                scope.updateLuminosity( [ hueData[index], hueData[index + 1], hueData[index + 2] ] );
            }
            else if (pickHue == 2)
            {
                nx = dx / d;
                ny = dy / d;

                scope.luminosityPosition[0] = (nx * 110) + 125;
                scope.luminosityPosition[1] = (ny * 110) + 125;

                scope.luminositySelector.style.left = ( scope.luminosityPosition[0] - 7) + 'px';
                scope.luminositySelector.style.top = ( scope.luminosityPosition[1] - 7) + 'px';
            }

            x = Math.floor(scope.luminosityPosition[0]);
            y = Math.floor(scope.luminosityPosition[1]);

            scope.color[0] = scope.luminosityData[(x + (y * 250)) * 4];
            scope.color[1] = scope.luminosityData[(x + (y * 250)) * 4 + 1];
            scope.color[2] = scope.luminosityData[(x + (y * 250)) * 4 + 2];

            updateColorInputs();

            scope.dispatchEvent( scope.changeEvent );
        }
    },


    //

    show: function()
    {
        this.container.style.visibility = 'visible';
    },

    getColor: function()
    {
        return this.color;
    },

    setColor: function( color )
    {
        // Ok, this is super dirty. The whole class needs some refactoring, again! :/

        var hsb, angle, distance, rgb, degreesToRadians = Math.PI / 180

        this.color = color;

        hsb = RGB2HSB(color[0] / 255, color[1] / 255, color[2] / 255);

        angle = hsb[0] * degreesToRadians;
        distance = (hsb[1] / 100) * 90;

        this.hueSelector.style.left = ( ( Math.cos(angle) * distance + 125 ) - 7 ) + 'px';
        this.hueSelector.style.top = ( ( Math.sin(angle) * distance + 125 ) - 7 ) + 'px';

        rgb = HSB2RGB(hsb[0], hsb[1], 100);
        rgb[0] *= 255; rgb[1] *= 255; rgb[2] *= 255;

        this.updateLuminosity( rgb );

        angle = (hsb[2] / 100) * 360 * degreesToRadians;

        this.luminosityPosition[0] = ( Math.cos(angle) * 110 ) + 125;
        this.luminosityPosition[1] = ( Math.sin(angle) * 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( color )
    {
        var context, angle, angle_cos, angle_sin, shade, offsetx, offsety,
        inner_radius = 100, outter_radius = 120, i, count = 1080 / 2, oneDivCount = 1 / count, degreesToRadians = Math.PI / 180,
        countDiv360 = (count / 360);

        offsetx = this.luminosity.width / 2;
        offsety = this.luminosity.height / 2;

        context = this.luminosity.getContext("2d");
        context.lineWidth = 3;
        context.clearRect(0, 0, this.luminosity.width, this.luminosity.height);

        for(i = 0; i < count; i++)
        {
            angle = i / countDiv360 * degreesToRadians;
            angle_cos = Math.cos(angle);
            angle_sin = Math.sin(angle);

            shade = 255 - (i * oneDivCount /* / count */) * 255;

            context.strokeStyle = "rgb(" + Math.floor( color[0] - shade ) + "," + Math.floor( color[1] - shade ) + "," + Math.floor( color[2] - shade ) + ")";
            context.beginPath();
            context.moveTo(angle_cos * inner_radius + offsetx, angle_sin * inner_radius + offsety);
            context.lineTo(angle_cos * outter_radius + offsetx, angle_sin * outter_radius + offsety);
            context.stroke();
        }

        this.luminosityData = context.getImageData(0, 0, this.luminosity.width, this.luminosity.height).data;
    },

    //

    addEventListener: function( type, listener, useCapture )
    {
        this.dispatcher.addEventListener(type, listener, useCapture);
    },

    dispatchEvent: function( event )
    {
        this.dispatcher.dispatchEvent(event);
    },

    removeEventListener: function( type, listener, useCapture )
    {
        this.dispatcher.removeEventListener(type, listener, useCapture);
    }
}



/* MAIN.JS */
var BACKGROUND_COLOR = [250, 250, 250];

var container = document.createElement('div');
document.body.appendChild(container);


var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
container.appendChild(canvas);


palette = new Palette();
backgroundColorSelector = new ColorSelector(palette);
container.appendChild(backgroundColorSelector.container);


backgroundColorSelector.setColor( BACKGROUND_COLOR );

backgroundColorSelector.addEventListener('change', onBackgroundColorSelectorChange, false);

function onBackgroundColorSelectorChange( event )
{
    BACKGROUND_COLOR = backgroundColorSelector.getColor();
    document.body.style.backgroundColor = 'rgb(' + BACKGROUND_COLOR[0] + ', ' + BACKGROUND_COLOR[1] + ', ' + BACKGROUND_COLOR[2] + ')';
}




/* COLORUTILS.JS */
function HSB2RGB(hue, sat, val)
{
    var red, green, blue,
    i, f, p, q, t;

    if (val == 0)
        return [ 0, 0, 0 ];

    hue *= 0.016666667; // /= 60;
    sat *= 0.01; // /= 100;
    val *= 0.01; // /= 100;

    i = Math.floor(hue);
    f = hue - i;
    p = val * (1 - sat);
    q = val * (1 - (sat * f));
    t = val * (1 - (sat * (1 - f)));

    switch(i)
    {
        case 0: red = val; green = t; blue = p; break;
        case 1: red = q; green = val; blue = p; break;
        case 2: red = p; green = val; blue = t; break;
        case 3: red = p; green = q; blue = val; break;
        case 4: red = t; green = p; blue = val; break;
        case 5: red = val; green = p; blue = q; break;
    }

    return [red, green, blue];
}

function RGB2HSB(red, green, blue)
{
    var x, f, i, hue, sat, val;

    x = Math.min( Math.min( red, green ), blue );
    val = Math.max( Math.max( red, green ), blue );

    if (x==val)
        return [0, 0, val*100];

    f = (red == x) ? green - blue : ((green == x) ? blue - red : red - green);
    i = (red == x) ? 3 : ((green == x) ? 5 : 1);

    hue = Math.floor((i - f / (val - x)) * 60) % 360;
    sat = Math.floor(((val - x) / val) * 100);
    val = Math.floor(val * 100);

    return [hue, sat, val];
}

        #container {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 400px;
            height: 250px;
        }

        #gradient-container {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 250px;
            height: 250px;
            cursor: pointer;
        }

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

        #luminosity-selector {
            position: absolute;
        }

        #hue-selector {
            position: absolute;
        }

        #canvas {
            cursror: crosshair;
        }

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

                <canvas id='luminosity-selector' width='15' height='15'></canvas>
                <canvas id='hue-selector' width='15' height='15'></canvas>  
            </div>
        </div>

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