javascript - HTML5 Canvas circle palette need custom size -

i have palette static size need made smaller or bigger, can anybode me try found can change values, bad result bad. 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; < count; i++)      {          angle = / 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'); // 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, super dirty. whole class needs 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; < count; i++)          {              angle = / 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;        = 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);      = (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>