canvas.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <canvas id="myCanvas" width="400px" height="300px"></canvas>"
        <!-- /// -->

        <p>Image to use:</p>

        <img
            id="scream"
            width="220"
            height="277"
            src="/assets/pic_the_scream.jpeg"
            alt="The Scream"
        />

        <p>Canvas:</p>

        <canvas
            id="myCanvas2"
            width="240"
            height="297"
            style="border: 1px solid grey"
        ></canvas>
        <!-- //// -->
        <canvas
            id="myCanvas3"
            width="200"
            height="120"
            style="border: 1px solid #d3d3d3"
        ></canvas>

        <!-- /// -->
        <script src="scripts/canvas.js"></script>
    </body>
</html>