0

So I have coded a small javascript to pass on few variables to another function however when I am running it nothing is happening any idea where am I going wrong? 

    <canvas id="canvas" width="1350" height="400"
    style="background-color:#333" onmousemove="F(event)">
    </canvas>


    <script type="text/javascript">
    function Reset() 
    {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "30px Arial";

        ctx.fillStyle = "#333";
        ctx.fillRect(0,0,1350,400);
    }


    function F(e,x1,y1,x2,y2)
    {
        var mouseX, mouseY;
        var xyz,xx,yy,xxx,yyy;

        xx = x1;
        yy = y1;
        xxx = x2;
        yyy = y2;

        if(e.offsetX) {
            mouseX = e.offsetX;
            mouseY = e.offsetY;
        }
        else if(e.layerX) {
            mouseX = e.layerX;
            mouseY = e.layerY;
        }

        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "30px Arial";
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(xx,yy,xxx,yyy);

        Handler(mouseX,mouseY);
    }

    function Handler(val,val1)
    {
        mouseX1 = val;
        var mouseX2,mouseY2,mouseY1,mouseX1;
        mouseX2 = mouseX1 + 20;
        mouseY2 = mouseY2 + 20;
        mouseY1 = val1;
        document.getElementById("x").innerHTML= mouseX1;
        document.getElementById("y").innerHTML= mouseY1;

        F(e,mouseX1,mouseY1,mouseX2,mouseY2);
    }
    </script><center>
    <p id="x"></p><p id="y"></p>

In the above code I am trying to pass out few values to the function F() to draw a rectangle according to the values forwarded. However I see nothing any idea where am I going wrong?

Thanks

Improve this question
2
  • it seems "e" not to be defined Commented Sep 25, 2015 at 8:43
  • Its a function paramter, isnt it? Commented Sep 25, 2015 at 8:47

3 Answers 3

Reset to default
1

When you receive the event to the Handler function, pass it back to the F function again. Otherwise e is not defined inside F

function Reset() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";

  ctx.fillStyle = "#333";
  ctx.fillRect(0, 0, 1350, 400);
}

function F(e, x1, y1, x2, y2) {
  var mouseX, mouseY;
  var xyz, xx, yy, xxx, yyy;

  xx = x1;
  yy = y1;
  xxx = x2;
  yyy = y2;

  if (e.offsetX) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
  } else if (e.layerX) {
    mouseX = e.layerX;
    mouseY = e.layerY;
  }

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(xx, yy, xxx, yyy);
  Handler(e, mouseX, mouseY);
}

function Handler(e, val, val1) {
  var mouseX2, mouseY2, mouseY1, mouseX1;
  mouseX1 = val;
  
  mouseX2 = mouseX1 + 20;
  mouseY2 = mouseY2 + 20;
  mouseY1 = val1;
  document.getElementById("x").innerHTML = mouseX1;
  document.getElementById("y").innerHTML = mouseY1;
  F(e, mouseX1, mouseY1, mouseX2, mouseY2);
}
<canvas id="canvas" width="1350" height="400" style="background-color:#333" onmousemove="F(event)"></canvas>
<center>
  <p id="x"></p>
  <p id="y"></p>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

variable declaration should be at the top ot the function. In F function replace first two lines
Hello Tibzon, Thanks for your help however there is one more problem arriving that when Handler() passes back the parameters to F() the ctx.fillRect(xx, yy, xxx, yyy); code inside F() is not being executed . Any ideas how could I correct it? Or could you please show a small demo ? Thanks a lot
1

One function calls another which in turn calls the calling function. All that will happen is that your browser will slow for a bit and then you script with throw a call stack overflow error.

You can not have the two functions call each other without providing a way to return (exit) from either function.

What you have done is below. How are they to ever return (exit)?

function A(){
   B(); // this never returns
}
function B(){
   A(); // this never returns
}
A();

As I am not sure what you want I can not provide a solution but to say remove one of the calls

function A(){
   B(); // this returns
   // so now this can finnish,
}
function B(){
   // dont call first function
   // let it exit
}
A();
Improve this answer

2 Comments

Hello Blindman67 , Actually F() function gets the current position of the cursor on the screen and then sends it to Handler() and then Handler() passes the parameter along with the new location of cursor back to F() Which is supposed to make a rectangle throu the parameters passed
The problem is each time you make a call you add an entry to the call stack. That entry can not be removed until the function has exited, nor can any other function get access to the call stack until it is empty, thus no new events, timers or anything will happen until the call stack overflows. What you are doing is call recursion but you need an exit condition.
0

You should separate the tasks of F function:

//mousemove = F(event)
//keep your code clear: F handle only the event
function F(e) {
//handle mouse positon and set vars
Rect(x1,y1,x2,y2)
}
function Rect(x1,y1,x2,y2)
{
//draw rectangle
//you don't need to call F function again: mouseover is still watching mouse position
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.