Javascript settings reload on click. Zonder dat textboxen worden geleegt

<script>
function dezefunctie(){
  var canvasSettings = {
      segments: 30,
      segmentsMin: segmentsMin,
      segmentsMax: segmentsMax,
      dimension: 800,
      fillColorDefault: 'white',
      fillColorInteract: Color,
      strokeColor: 'black',
      strokeWidth: 2,
      interactColoring: true,
      interactSegmenting: true,
      buttonsHeight: 21,
      buttonsWidth: 80,
      buttonsMarginY: 20,
      buttonsFillColor: '#FFF',
      buttonsStrokeColor: '#000',
    };
  
</script>
<?php
?>
<form >
 <input type="button" onclick="dezefunctie()" Value="Kleur veranderen  " >
</form>

$(document).ready(function() {
    var segmentsMin = 5;
    var segmentsMax = 40;
     var Color;
  
    var $canvasContainer = $('#canvas-4');
  
    var canvasSettings = {
      segments: 30,
      segmentsMin: segmentsMin,
      segmentsMax: segmentsMax,
      dimension: 800,
      fillColorDefault: 'white',
      fillColorInteract: Color,
      strokeColor: 'black',
      strokeWidth: 2,
      interactColoring: true,
      interactSegmenting: true,
      buttonsHeight: 21,
      buttonsWidth: 80,
      buttonsMarginY: 20,
      buttonsFillColor: '#FFF',
      buttonsStrokeColor: '#000',
    };



    var stage = new Kinetic.Stage({
      container: $canvasContainer.attr('id'),
      height: canvasSettings.dimension + canvasSettings.buttonsHeight + canvasSettings.buttonsMarginY,
      width: canvasSettings.dimension
    });
  
    var coloredCircle = new coloredCirc(canvasSettings);
    
    stage.add(coloredCircle);
  
    $canvasContainer
    .data('settings',canvasSettings)

     /* END - Canvas - 4 */
});

function coloredCirc(settings) {
  settings.centerPoint = {x: settings.dimension / 2, y: settings.dimension / 2};
  settings.radius      = settings.dimension / 2 - settings.strokeWidth;
  
  var layer = new Kinetic.Layer();
  
  if (settings.segments > 1) {
    var wedgeAngleDegrees   = Math.ceil(360 / settings.segments);
  
    for (j=0; j < settings.segments; j++) {
      var wedge = new Kinetic.Wedge({
        x: settings.centerPoint.x,
        y: settings.centerPoint.y,
        radius: settings.radius,
        angleDeg: wedgeAngleDegrees,
        fill: settings.fillColorDefault,
        stroke: settings.strokeColor,
        strokeWidth: settings.strokeWidth,
        rotationDeg: j * wedgeAngleDegrees
      });
      
      if (settings.interactColoring) {
        wedge.on('click', function() {
          this.setFill(this.attrs.fill == settings.fillColorDefault ? Color : settings.fillColorDefault);
          layer.draw();
          
        });
      }
      
      layer.add(wedge);
    }
  } else {
    var circle = new Kinetic.Circle({
      x: settings.centerPoint.x,
      y: settings.centerPoint.y,
      radius: settings.radius,
      fill: settings.fillColorDefault,
      stroke: settings.strokeColor,
      strokeWidth: settings.strokeWidth,
    });
    
    if (settings.interactColoring) {
      circle.on('click', function() {
        this.setFill(this.attrs.fill == settings.fillColorDefault ? Color : settings.fillColorDefault);
        layer.draw();
      });
    }
    
    layer.add(circle);
  }
  
  if (settings.interactSegmenting) {
    var buttonWidth = settings.buttonsWidth / 2;
    
    var buttonMoreGroup = new Kinetic.Group({
      x: 1,
      y: settings.radius * 2 + settings.buttonsMarginY
    })
    .on('click', function() {
      var layer          = this.parent;
      var stage          = layer.parent;
      var container      = $(stage.attrs.container);
      
      var canvasSettings = container.data('settings');
      canvasSettings.segments = Math.min(canvasSettings.segments+5 , canvasSettings.segmentsMax);
      //console.log(canvasSettings.segments);
      
      var coloredCircle = new coloredCirc(canvasSettings);
      
       layer.remove();
       stage.add(coloredCircle);
    })
    .on('mousedown', function() {
      var shape  = this.get('Shape')[0];
      var text  = this.get('Text')[0];
      var layer = this.parent;
      
      shape.setFill('#666');
      text.setStroke('#FFF');
      layer.draw();
    });
    
    var buttonMoreRect = new Kinetic.Shape({
      drawFunc: function(canvas) {
        var radius = 5;
        var width  = 40;
        var height = 21;
        
        context = canvas.getContext('2d');
        context.beginPath();
        context.moveTo(radius, 0);
        context.arcTo(0, 0, 0, radius, radius);
        context.arcTo(0, height, radius, height, radius);
        context.lineTo(width, height);
        context.lineTo(width, 0);
        context.closePath();
        
        canvas.fillStroke(this);
      },
      fill: settings.buttonsFillColor,
      stroke: settings.buttonsStrokeColor,
      strokeWidth: 2,
      cornerRadius: 5
    });
    
/*    var buttonMoreText = new Kinetic.Text({
      x: 0,
      y: 1,
      text: '+',
      width: buttonWidth,
      align: 'center',
      fontFamily: 'arial',
      fontSize: 18,
      stroke: '#000'
    });
    
    buttonMoreGroup.add(buttonMoreRect);    
    buttonMoreGroup.add(buttonMoreText);
    layer.add(buttonMoreGroup);
    
    var buttonLessGroup = new Kinetic.Group({
      x: settings.buttonsWidth / 2,
      y: settings.radius * 2 + settings.buttonsMarginY
    })
    .on('click', function() {
      var layer          = this.parent;
      var stage          = layer.parent;
      var container      = $(stage.attrs.container);
      
      var canvasSettings = container.data('settings');
      canvasSettings.segments = Math.max(canvasSettings.segments-5, canvasSettings.segmentsMin);
      //console.log(canvasSettings.segments);
      
      var coloredCircle = new coloredCirc(canvasSettings);
      
      layer.remove();
      stage.add(coloredCircle);
    })
    .on('mousedown', function() {
      var shape = this.get('Shape')[0];
      var text  = this.get('Text')[0];
      var layer = this.parent;
      
      shape.setFill('#666');
      text.setStroke('#FFF');
      layer.draw();
    });*/
    
    // var buttonLessRect = new Kinetic.Shape({
    //   drawFunc: function(canvas) {
    //     var radius = 5;
    //     var width  = 40;
    //     var height = 21;
        
    //     context = canvas.getContext('2d');
    //     context.beginPath();
    //     context.moveTo(0, 0);
    //     context.lineTo(0, height);
    //     context.arcTo(width, height, width, height - radius, radius);
    //     context.arcTo(width, 0, width -radius, 0, radius);
    //     context.closePath();
        
    //     canvas.fillStroke(this);
    //   },
    //   fill: settings.buttonsFillColor,
    //   stroke: settings.buttonsStrokeColor,
    //   strokeWidth: 2,
    //   cornerRadius: 5
    // });
    
    // var buttonLessText = new Kinetic.Text({
    //   x: 0,
    //   y: 0,
    //   text: '--',
    //   width: buttonWidth,
    //   align: 'center',
    //   fontFamily: 'arial',
    //   fontSize: 18,
    //   stroke: '#000'
    // });
    
    // buttonLessGroup.add(buttonLessRect);
    // buttonLessGroup.add(buttonLessText);
    // layer.add(buttonLessGroup);

//get a reference to the canvas

  }
  
  return layer;
}

	<form name="bgcolorForm">Welke kleur wil je
			<select onChange="if(this.selectedIndex!=0)
				Color=this.options[this.selectedIndex].value">
					<option value="choose">set background color    
					<option  value="Red">Red
					<option value="Blue">Blue
					<option value="Green">Green
					<option value="Yellow">Yellow
					<option value="Purple">Purple
					<option value="Pink">Pink
			</select>
		</form>