Home/ Questions/Q 6159241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T21:05:52+00:00

I’m newbie to html5, and now I got a problem with canvas. I try

  • 0

I’m newbie to html5, and now I got a problem with canvas. I try to draw a rectangular using canvas 2d. in the developer tool, it displays that canvas is null.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Canvas Testing</title>
<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);

</script>

<style type="text/css">
    body{
        background:#ccc;
        color:777;
        font-size:14px;
        font-family: verdana;
    }
    #myCanvas{
        margin:50px auto;
        background:#eee;
    }
</style>
</head>
<body>
    <canvas id="myCanvas" height="180" width="360"></canvas>
</body>
</html>

Any help would be appreciated. Thanks in advance…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to place your JavaScript within a function that’s called by the window.onload event.

    window.onload = function() {
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,150,75);
}
    • 0