fill the canvas with the select colour (stroke style) html5

i am trying to make something like paint , in my code user chooses color for drawing , now if the user selects Fill button , the code should fill the whole screen with color user chose in the first case i-e if color was black for stroke style than canvas should be completely black, in my code , i am getting the correct color , but cant seem to fill the canvas , with it . canvas seems to get to refresh or (stroke style='#fffff' i think) where is my code (my complete code now) my html file 开发者_C百科

     <li>Clear the canvas: <button id="clearCanvasSimple" type="button">Clear</button></li> 
                  <li><span class="highlight">Choose a color: </span>
                    <button id="choosePurpleSimpleColors" type="button">Purple</button>
                    <button id="chooseGreenSimpleColors" type="button">Green</button>
                    <button id="chooseYellowSimpleColors" type="button">Yellow</button>
                    <button id="chooseBrownSimpleColors" type="button">Brown</button>
                  </li>
                    <li>Erase : <button id="chooseEraseSimpleColors" type="button">Erase</button></li>
                    <li>Fill with colour:<button id="chooseFillSimpleColors" type="button">Fill</button></li> 
              </ul> 

               <script type="text/javascript" src="test2.js"></script>


<script> 
  initGame(null, document.getElementById('movecount'));
</script>
</body>

now test.js

 if(window.addEventListener) {

 window.addEventListener('load', function ()
 {
  var canvas;
  var context;
  var canvasHeight = 500;
  var canvasWidth = 1250;
  var canvas_simple;
  var context_simple;
  var tool;
  var paint_simpleColors;


  // Initialization sequence.
  function init () 
  {
  // Find the canvas element.
     var canvasDiv = document.getElementById('canvas');
     canvas_simple = document.createElement('canvas');
     canvas_simple.setAttribute('height', canvasHeight);
     canvas_simple.setAttribute('width', canvasWidth);
     canvas_simple.setAttribute('id', 'canvasSimple');
     canvasDiv.appendChild(canvas_simple);
     if(typeof G_vmlCanvasManager != 'undefined')
     {
     canvas_simple = G_vmlCanvasManager.initElement(canvas_simple);
     }
     context_simple = canvas_simple.getContext("2d");
     tool = new tool_pencil();
     //canvas_simple.addEventListener('mousemove', ev_canvas, false);
     canvas_simple.addEventListener('mousedown', ev_canvas, false);
     canvas_simple.addEventListener('mousemove', ev_canvas, false);
     canvas_simple.addEventListener('mouseup',   ev_canvas, false);
     clearCanvasSimple.addEventListener('mousedown', function () {OnButtonDown (clearCanvasSimple)}, false);

     choosePurpleSimpleColors.addEventListener('mousedown', function () {ButtonDown1 (choosePurpleSimpleColors)}, false);
    chooseGreenSimpleColors.addEventListener('mousedown', function () {ButtonDown2 (chooseGreenSimpleColors)}, false);
    chooseYellowSimpleColors.addEventListener('mousedown', function () {ButtonDown3 (chooseYellowSimpleColors)}, false);
    chooseBrownSimpleColors.addEventListener('mousedown', function () {ButtonDown4 (chooseBrownSimpleColors)}, false);
    chooseEraseSimpleColors.addEventListener('mousedown', function () {ButtonDown5 (chooseEraseSimpleColors)}, false);
    chooseFillSimpleColors.addEventListener('mousedown', function () {ButtonDown6 (chooseFillSimpleColors)}, false);
    // canvas_simple.addEventListener('mousemove', ev_mousemove, false);
   }

function tool_pencil () {
var tool = this;
this.started = false;

// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
    context_simple.beginPath();
    paint_simpleColors = true;
    var radius = 5;
context_simple.lineJoin = "round";
context_simple.lineWidth = radius;
    context_simple.moveTo(ev._x, ev._y);
    tool.started = true;
};
  this.mousemove = function (ev) {
  if (tool.started&&paint_simpleColors) {
    context_simple.lineTo(ev._x, ev._y);
    context_simple.stroke();
  }
};
this.mouseup = function (ev) {
  if (tool.started) {
      paint_simpleColors = false;
    tool.mousemove(ev);
    tool.started = false;
  }
};

}
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
  ev._x = ev.layerX;
  ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
  ev._x = ev.offsetX;
  ev._y = ev.offsetY;
}

// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
  func(ev);
}


}
function ButtonDown1 (choosePurpleSimpleColors)
{
     context_simple.strokeStyle = "#2E0854";
}
function ButtonDown2 (chooseGreenSimpleColors)
{
     context_simple.strokeStyle = "#1DA237";
}
function ButtonDown3 (chooseYellowSimpleColors)
{
     context_simple.strokeStyle = "#FFFF00";
}
function ButtonDown4 (chooseBrownSimpleColors)
{
     context_simple.strokeStyle = "#A52A2A";
}
function ButtonDown5 (chooseEraseSimpleColors)
{
     context_simple.strokeStyle = "#FFFFFF";
}
function ButtonDown6 (chooseFillSimpleColors)
{
 context_simple.fillStyle = context_simple.strokeStyle;
 context_simple.fillRect(0, 0, canvas.width, canvas.height);
 canvas_simple.width = canvas_simple.width;
}

function OnButtonDown (clearCanvasSimple) {
context_simple.fillStyle = '#ffffff'; // Work around for Chrome
context_simple.fillRect(0, 0, canvasWidth, canvasHeight); 
canvas_simple.width = canvas_simple.width; // clears the canvas 
 }

init();
}, false); }

i hope does helps