Member Avatar for marvolo1300

Hi, I am new to javascript. Syntactically, this code seems correct, but for some strange reason, it refuses to execute. I know it's bad practice to include the script within the same document, but I just want this to work. Thank you in advance.

 <!DOCTYPE html>
 <html>
        <head>
            <title>
                Test
                </title>

                <body>
                    <p>
                        Hello World.
                        </p>
                        <br>
                        <p id = "bye">
                            </p>

                        <canvas id="canvas1" width="200" height = "100" style="border:1px solid #000000;"> 
                            </canvas>

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

                                document.getElementById("bye").innerHTML = "bye";
                                </script> 
                    </body>
            </head>
    </html>
  • 3 Contributors
  • 3 Replies
  • 131 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by rayidi
Member Avatar for untio

Hi,
I think that you need to change
var c=document.getElementById("myCanvas");
Into
var c=document.getElementById("canvas1");
myCanvas for canvas1.
canvas1 is the id that you have done to it.

Member Avatar for marvolo1300

Thank you very much.

Member Avatar for rayidi

On your code you written entire body in head seaction. try to keep seperately.

<html>
    <head>
        <title>You'r document title here</title>
    </head>
    <script>
        // your script goes here
    </script>
    <body>
        <!-- Content goes here -->
        <script>
            // Your script goes here
        </script>
    </body>
</html>

to avoid errors.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.