Member Avatar for dhani09

I have the following code that gets input from users on a button click and draws on a canvas but when i click the button nothing works. Here's the code:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="mycss.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js.js"></script>
        <title>CANVAS</title>

    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border: 1px solid #000000;"></canvas>

        <form>
            <input id="rectangle" type="button" value="Draw a rectagle" class="button2"/>   
        </form>

    </body>
</html>

js.js

function drawRectangle(){
    var x  = prompt("Enter x co-ordinate", "0");
    var y  = prompt("Enter y co-ordinate", "0");
    var color = prompt("Enter color to fill rectangle","color");

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = color;
    context.fillRect(x,y,100,50);


}
function registerEvents(){
    var rect = document.getElementById( "rectangle" );
   rect .addEventListener( "click", drawRectangle, false); 
}

window.addEventListener(load, registerEvents, false);

I don't know why the code doesn't work. What i'm i getting wrong? Thanks

  • 2 Contributors
  • 2 Replies
  • 155 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by dhani09
Member Avatar for IIM

there are issues with different browser event listener.Take a look.I have for now added script in same HTML you can modify it accordingly.
For IE and non/IE browser there are differnt way to load and call nethods.

window.addEventListener('load', registerEvents, false);

Moreover,you were also missing quotes before and after event in line 18

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="mycss.css" rel="stylesheet" type="text/css" />

        <title>CANVAS</title>
<script>
function drawRectangle(){
    var x  = prompt("Enter x co-ordinate", "0");
    var y  = prompt("Enter y co-ordinate", "0");
    var color = prompt("Enter color to fill rectangle","color");
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.fillStyle = color;
    context.fillRect(x,y,100,50);
}
function registerEvents(){
    var rect = document.getElementById( "rectangle" );

if (window.addEventListener){

  window.addEventListener('click', drawRectangle, false);
  }
else if (window.attachEvent){

  window.attachEvent('onclick', drawRectangle);}



}

if (window.addEventListener){

  window.addEventListener('load', registerEvents, false);
  }
else if (window.attachEvent){

  window.attachEvent('onload', registerEvents);}

//window.addEventListener("onload", registerEvents, false);
</script>
    </head>
    <body>
        <canvas id="myCanvas" width="800" height="600" style="border: 1px solid #000000;"></canvas>

        <form>
            <input id="rectangle" type="button" value="Draw a rectagle" class="button2"/>   
        </form>

    </body>
</html>
Member Avatar for dhani09

Okay thanks it actually was the missing quotes. It works now.

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.