Canvas Tag Example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Test</title>
</head>

<body>
    <!I had to put the canvas inside another container to center it>
    <div style="text-align: center;">
        <!
            The canvas has the id "myCanvas" for the JavaScript to reference
            The width and height are set to 500
            A small border is drawn to show where the canvas is
            The text within a canvas tag is only shown if the canvas tag is not supported by the browser or JavaScript is disabled
        >
        <canvas id="myCanvas" width="500" height="500" style="border: 1px solid black;">
            If you can see this text, your browser does not support Canvas tags
        </canvas>
    </div>
</body>

<!I put the script outside of the main body and it still works>
<script>
    //First, the JavaScript has to store the canvas element in a variable
    var canvas = document.getElementById("myCanvas");
    //The context for drawing objects is stored in another variable.
    var ctx = canvas.getContext("2d");

    //I made a color gradient about 500px wide. Using a width of 400, part of the text appears too white to read
    var grd = ctx.createLinearGradient(0, 0, 500, 0);
    //Two colors are added. The first color is the purple from a GCU Lopes logo converted to hex
    grd.addColorStop(0, "#462089");
    grd.addColorStop(1, "white");

    //Instruct the context to use the color style from the gradient
    ctx.fillStyle = grd;
    ctx.font = "72px Times New Roman";
    ctx.textAlign = "center";
    //Center the text "GCU Lopes" approximately in the center. I offset the Y coordinate by 20 to further center the text
    ctx.fillText("GCU Lopes", canvas.width/2, canvas.height/2 + 20);

    //Start a drawing operation
    ctx.beginPath();
    //Draw a circle
    ctx.arc(canvas.width/2, canvas.height/2, 200, 0, 2 * Math.PI);
    //Apply the circle to the canvas
    ctx.stroke();
</script>

</html>