How to active and deactivate function on check

I wish to run 2 function: 1 if check box checked another if the check box is not. I can not seem to activate the Wave() function at all. but the draw() function is as required. It is just to activate or deactivate on check box checked or otherwise.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var PI2 = Math.PI*2; //place the circle on canvas
var cx = document.getElementById('xpos');
var cy = document.getElementById('ypos');
var fuzz = document.getElementById('blur');
var intensity = document.getElementById('intense');

//Gets the initial values for wave form
  var sinCheckBox = document.getElementById('sin');
  var sinInput = document.getElementById('sin-f');
  var periodInput = document.getElementById('period');
  var ampInput = document.getElementById('amps');
  var yPosInput = document.getElementById('Y-pos');

  var isDrawSin;
  var sinFrequency;
  var period;
  var amp;
  var yPosition;
  var xPosition;
  var factor;

  draw();

function validate() {
        if (document.getElementById('sin').checked) {
            wave();
        } else {
            draw();
        }
    }

function draw(){
  example = intensity.value/10;
  //console.log("the intensity = " + example);

  ctx.globalAlpha= example;
  ctx.fillStyle='rgba(25, 255, 50, 0.8)';
  ctx.shadowColor = 'rgba(25, 255, 50, 1)';
  ctx.shadowBlur = fuzz.value; 
  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.beginPath();
  ctx.arc(cx.value,cy.value,3,0,PI2);
  ctx.closePath();
  ctx.fill();
  drawFrame();
  drawCross();

    requestAnimationFrame(draw);
}

  function wave() {
    resize();
    setParameters();
    drawFrame();
    drawCross();
    drawWave();
    requestAnimationFrame(wave);
  }

I would like the draw() function to be active at the start but when the user checks the 'sinCheckBox = document.getElementById('sin')' to switch to the wave() function and stop the draw() function. And vice versa.

Thanks