index.html

<!DOCTYPE html>
<html>

<head>
    <title>Draw online</title>
    <meta charset="utf8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>

    <input type="button" value="Menu" id="showMenu">
    <div id="menu" class="hide">
        <input type="button" value="Export as PNG" onclick="exportCanvas();">
        <input type="button" value="Load PNG" onclick="document.getElementById('openFile').click()">
        <input type="file" style="display: none;" accept=".png" id="openFile" value="Open" onclick="openCanvas();">
        <input type="button" value="Save" onclick="saveCanvas();">
        <input type="button" value="Load" onclick="loadCanvas();">
        <input type="button" value="Clear" onclick="clearCanvas();">
        <input type="text" value="" id="urlCanvas">
        <div id="menu-draw">

            <div class="input-color-container">
                <input id="color" class="input-color" type="color">

            </div>
            <div>
                <input id="lineWidth" type="range" name="points" min="1" max="10">
                <input type="number" id="textInput">
            </div>
            <div id="menu-type">
                <input id="pen" class="btn" type="button" value="Pen">
                <input class="btn" type="button" value="Pencil">
                <input class="btn" type="button" value="Rubber">
            </div>
        </div>
    </div>
    <div id="paint">
        <canvas id="myCanvas">
    </div>
</body>

</html>