Recursos C2D

Referências

Modelos

Para documentos «pequenos», por exemplo, para testar uma função ou técnica, pode usar um único documento HTML com o código gráfico incluído.

Porém, se está a fazer um modelo gráfico mais complexo, deve separar o documento HTML do código JavaScript em vários ficheiros .

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 prog.js com código JavaScript:

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