index.html

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Canavas Fun</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <link rel="stylesheet" href="css/canvas-fun.css">
    </head>
    <body>
        <canvas id="screen" width="800px" height="450px"></canvas>
        <!-- let us add some ui elements -->
        <div class="slidecontainer">
            <p>SETTINGS</p>
            <p>My Value</p>
            <input type="range" min="1" max="11" value="5" class="slider" id="my-first-value">
            <p>Switch</p>
            <label class="switch">
                <input type="checkbox" id="colors">
                <span class="slide-switch round"></span>
            </label>
        </div>
        <script src="js/canvas-fun.js"></script>
    </body>
</html>