Home/ Questions/Q 9092751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:54:50+00:00

I’m interested in getting into HTML5 game dev, so naturally, one of the first

  • 0

I’m interested in getting into HTML5 game dev, so naturally, one of the first things I went about was learning to use the canvas element. However, despite learning from well known sources and practically copy-pasting their code, I can’t so much as draw a rectangle. Below is a sampling of my HTML and Javascript

<html>
<head>
    <link rel="stylesheet" type="text/css" href="mainStyle.css">

    <script src="mainScript.js"></script>

</head>
<body onload="draw();">

    <canvas id="tut" width="300" height="200" style="border:1px solid #c3c3c3;"></canvas>

</body>
</html>

function draw(){
    var c = document.getElementById("tut");
    if(c.getContext){
        var ctx = c.getContext("2d");

        ctx.fillStyle = "rgb(200, 0 , 0)";
        ctx.fillRect(10, 10 55, 50);

        ctx.fillStyle = "rgba(0, 0 200, 0.5)";
        ctx.fillRect(30, 50, 55, 50)
    }
}

Am I missing something here? Any help is appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your draw function is outside the html block. It needs to be inside a script tag, for example

    <script>
function draw(){
var c = document.getElementById("tut");
if(c.getContext){
    var ctx = c.getContext("2d");

    ctx.fillStyle = "rgb(200, 0 , 0)";
    // You were also missing a comma in this next line...
    ctx.fillRect(10, 10, 55, 50);

    // ...and also here.
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
    ctx.fillRect(30, 50, 55, 50)
    }
}
</script>
    • 0