Clock and Counter

<!DOCTYPE html>
<html>

<body>

<input type="text" id="myText" value="">

<button onclick="myFunction()">Start</button>

<canvas id="gameCanvas" width="1350" height="600"></canvas>

<script>

var clock = false;
var counter = false;

window.onload = function() {
                canvas = document.getElementById('gameCanvas');
                canvasContext = canvas.getContext('2d');

                var framesPerSecond = 1
                setInterval(function() {
                if(clock == true) {
                    drawClock();
                    countSec();
                    countMin();
                    countHour();
                }
                }, 1000/framesPerSecond);

                var framesPerSecond2 = 30
                setInterval(function() {
                if(counter == true) {
                    drawCounter();
                    count();
                }
                }, 1000/framesPerSecond2);
}

function myFunction() {
     var text = document.getElementById("myText").value;
     if(text == "clock") {
            counter = false;
            clock=true;
     }

     if(text == "counter") {
            clock = false;
            counter=true;
     }

     if(text == "reset clock") {
            second = 0;
            minute = 0;
            hour = 0;
     }

     if(text == "reset counter") {
            Count = 0;
     }
}

function drawRect(X,Y, width,height, color) {
            canvasContext.fillStyle = color;
            canvasContext.fillRect(X,Y, width,height);
}

var second = 0
var minute = 0
var hour = 0

var paused = false

function countSec() {
second ++
}

function countMin() {
                if(second == 60) {
                                second = 0;
                                minute ++
                }
}

function countHour() {
                if(minute == 60) {
                                minute = 0;
                                hour ++
                }
}


function drawClock() {
                drawRect(0,0, 750,750, 'white');
                canvasContext.font="40px Arial";
                canvasContext.fillStyle = 'blue';

                canvasContext.fillText("Seconds", 50,50);
                canvasContext.fillText(second, 230,50);

                canvasContext.fillText("Minutes", 50,100);
                canvasContext.fillText(minute, 230,100);

                canvasContext.fillText("Hours", 50,150);
                canvasContext.fillText(hour, 230,150);

                canvasContext.fillText(":", 215,50);
                canvasContext.fillText(":", 215,100);
                canvasContext.fillText(":", 215,150);
}

var Count = 0

function count() {
console.log(Count);
Count ++
}

function drawCounter() {
                drawRect(0,0, 750,750, 'white');
                canvasContext.font="40px Arial";
                canvasContext.fillStyle = 'blue';
                canvasContext.fillText("Counter :", 50,50);
                canvasContext.fillText(Count, 230,50);
}

</script>

</body>
</html>