Canvas not coloring

Question

I started a few weeks ago programming HTML5, and now i am actually learning more about canvas, the first exercise was to create a rectangle and fill it in js. but, it's seems not to work. Where is the problem?

code:

<head>
      <title>Canvas Exercise</title>
           <script type="text/javascript">
                myCanvas = document.getElementById("canvasTry");
                context = myCanvas.getContext("2d");
                context.fillStyle = "#FF0000";
                context.fillRect = (10,10,150,150);

    </script>
    </head>

      <body>
         <canvas id="canvasTry" width="300px" height="150px" style="border:2px solid black">
             !! IF YOU READ THIS, YOUR BROWSER DO NOT SUPPROT CANVAS  !!
              </canvas>

     </body>

one thing is, instead of myCanvas = document.getElementById("canvasTry"); you should use myCanvas = document.getElementById("#canvasTry"); '#' is missing in getElementById() function — Ankush Sharma, Oct 24 '18 at 18:00
You likely have an error in your console. Read that. Note that you are trying to get an element by id that is not present in your HTML when you try to get it. — Heretic Monkey, Oct 24 '18 at 18:00
@AnkushSharma No, `getElementById` takes the id with no adornment. You're thinking of jQuery or `querySelector`... — Heretic Monkey, Oct 24 '18 at 18:01
@Heretic Monkey, yes you are right, my bad. I misunderstood. Thanks :-) — Ankush Sharma, Oct 24 '18 at 18:04
Hello, welcome to StackOverflow! You did not provide a full description of the problem. Please read [this link](http://idownvotedbecau.se/itsnotworking/) to see why this is a problem and how you can improve your question! — Leroy, Oct 24 '18 at 18:24

gman · Answer 1 · 2018-10-24T18:11:10.970

Put your script at the bottom of the page. As it is your script runs before the canvas exists

Also, fillRect is a function

so

context.fillRect = (10, 10, 150, 150); // bad!!
context.fillRect(10, 10, 150, 150);    // good

Fixed

<head>
  <title>Canvas Exercise</title>
</head>

  <body>
     <canvas id="canvasTry" width="300px" height="150px" style="border:2px solid black">
         !! IF YOU READ THIS, YOUR BROWSER DO NOT SUPPROT CANVAS  !!
          </canvas>

 </body>
 <script>
            myCanvas = document.getElementById("canvasTry");
            context = myCanvas.getContext("2d");
            context.fillStyle = "#FF0000";
            context.fillRect(10,10,150,150);
</script>

Working example

<head>
  <title>Canvas Exercise</title>
</head>

  <body>
     <canvas id="canvasTry" width="300px" height="150px" style="border:2px solid black">
         !! IF YOU READ THIS, YOUR BROWSER DO NOT SUPPROT CANVAS  !!
          </canvas>

 </body>
 <script>
            myCanvas = document.getElementById("canvasTry");
            context = myCanvas.getContext("2d");
            context.fillStyle = "#FF0000";
            context.fillRect(10,10,150,150);
</script>

A few other things

The width and height of the canvas are numbers

<canvas width="300px" height="150px"  // BAD!!
<canvas width="300" height="150"      // Good

It works because the browser is ignores the px

You don't need type="text/javascript"
```
<script>
...code...
</script>
```
works just fine
You really don't need the warning inside your canvas
```
 <canvas...>
 !! IF YOU READ THIS, YOUR BROWSER DO NOT SUPPROT CANVAS  !!
 </canvas>
```
It's 2018. There are effectively no browsers that don't support canvas.

Thank you for the reply, even tho, it still not colouring after putting the code at the bottom — snevio, Oct 24 '18 at 18:05

Canvas not coloring

1 Answers1