MouseMove issue on canvas

Question

I'm attempting to get a square shape to follow my mouse around on the canvas using "mousemove".

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var canvas = canvastmp.getContext("2d");
    window.addEventListener('mousemove', trevor, false);
}
function trevor(pos){
    canvas.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

When I run it, nothing at all shows up. I've been tweaking it and scouring it for a while now, and I can't seem to figure out what's wrong. Again, I'm sorry for the totally nooby question! Any help at all is much appreciated.

Also, I'm using Chrome, if that helps.

Answer 1

The problem is that canvas is out of scope. To get it back in scope, either embed the trevor function inside the start function, or pass the canvas context as a variable to a closure:

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var ctx = canvastmp.getContext("2d");
    window.addEventListener('mousemove', function(pos){trevor(ctx,pos)}, false);
}
function trevor(ctx, pos){
    ctx.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    ctx.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

Or alternatively, use a more object-like approach:

function trevor(ctx) {
    function moveHandler(pos) {
        ctx.clearRect(0,0,600,400);
        ctx.fillRect(pos.clientX - 25, pos.clientY - 25, 100, 100);
    }
}
var myTrevor = trevor((document.getElementById('myCanvas')).getContext('2d'));
window.addEventListener('load', myTrevor.moveHandler, false);

The nice thing about this is that the contexts are always relevant; trevor only knows the context it's given, and the code that sets up the event handler also retrieves the context.

Answer 2

Your canvas variable is defined in the function start, but then when you refer to it in the function trevor it's out of scope.

Define it out of both functions so it's in scope for both and this works.

See - http://jsfiddle.net/sync/mE4B4/

var canvas;

function start() {
    var canvastmp = document.getElementById("myCanvas");
    canvas = canvastmp.getContext("2d");
    window.addEventListener('mousemove', trevor, false);
}

function trevor(pos) {
    canvas.clearRect(0, 0, 600, 400);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x - 25, y - 25, 100, 100);
}

window.addEventListener('load', start, false);​

Answer 3

You mention you're using Chrome - if so, please take a look at the built-in inspector (Tools > Developer Tools). The Console tab displays errors. If you take a look there, you'll see something like Canvas not defined, which is a useful hint.

The 'canvas' var was out of scope. The following will work:

var c = document.getElementById("myCanvas");

function mousemove(pos) {
  
  var ctx = c.getContext("2d");
  ctx.clearRect(0,0,600,400);
  
  var x = pos.clientX;
  var y = pos.clientY;

  ctx.fillStyle="#FF0000";
  ctx.fillRect(x-25,y-25,50,50);
}

window.addEventListener('mousemove', mousemove, false);