Cábula C2D

Referências

Norma em HTML Canvas 2D Context e WHATWG - HTML Living Standard.
Documentação em Mozilla Developer Network.
Tutorial em Mozilla Developer Network.

Modelos

Um documento «standalone>

O código JavaScript está incluído no documento HTML.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script>
function main() {
    let gc = document
        .getElementById("acanvas")
        .getContext("2d");
    gc.fillStyle = "steelblue";
    gc.fillRect(0,0,256,256);
}
    </script>
</head>
<body>
    <canvas id="acanvas">
        <script>main();</script>
    </canvas>
</body>
</html>

Código e Documento separados

O código JavaScript está separado do documento HTML.

Ficheiro HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="prog.js">
    </script>
</head>
<body>
    <canvas id="acanvas"></canvas>
    <script>main();</script>
</body>
</html>

Ficheiro JavaScript:

function main() {
    let gc = document
                .getElementById("acanvas")
                .getContext("2d");
    gc.fillStyle = "steelblue";
    gc.fillRect(0,0,256,256);
}