Start button on canvas

by MegaScience

HTML

<canvas id="mycanvas"></canvas>

JavaScript

var canvas = document.getElementById('mycanvas');
    canvas.width = 800;
    canvas.height = 336;

    var ctx = canvas.getContext("2d");
    var go = false;
    var rect;

    function reset() {
        //reset function
    };

    function main() {
        //main function
        //just some dummy animation
        ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height,
        1, 1, canvas.width - 1, canvas.height - 1);

        if (go === true) setTimeout(main, 10);
    };

    function menu() {

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = "rgb(0, 50, 250)";
        ctx.font = "24px Helvetica";
        ctx.textAlign = "left";
        ctx.textBaseline = "middle";

        rect = {
            x: 32,
            y: 32,
            w: 70,
            h: 30
        };
        //this is not proper way to calculate text boundary,
        //but for demo's sake.
        ctx.fillText("play", rect.x, rect.y + 16);

    }

    menu();

    canvas.addEventListener('click', checkStart, false);

    function checkStart(e) {
        var p = getMousePos(e);

        if (p.x >= rect.x && p.x <= rect.x + rect.w &&
            p.y >= rect.y && p.y <= rect.y + rect.h) {
            
            go = !go;
            if (go === true) {
                main();
            } else {
                menu();
            }
        }
    }

        function getMousePos(e) {
            var r = canvas.getBoundingClientRect();
            return {
                x: e.clientX - r.left,
                y: e.clientY - r.top
            };
        }