HTML5 Canvas and JS - Mouse Movement, strange error
Question
I am trying to make my image follow my mouse. I have used a lecture guide from university to create this code, and it seems identical to all the code I've seen, but I get the error in Chrome developer tools: Uncaught TypeError: thisCanvas.addEventListener is not a function
Any ideas? I've stared at this for hours now.
<!DOCTYPE html>
<html>
<head>
<title> Gravity Game </title>
<meta charset = "UTF-8">
<link type = "text/css" rel = "stylesheet" href = "style.css">
</head>
<body onLoad="start_game()">
<header>
<h1 id = "title1"> Gravity </h1> <h1 id = "title2"> Game </h1>
</header>
<ul id = "nav">
<li class = "inactive"><a href = "about.html"> About </a></li>
<li id = "active"><a href = "play.html"> Play Game </a></li>
</ul>
<canvas id = "myCanvas" width = "1500" height = "500"></canvas>
<script>
var thisCanvas = document.getElementById("myCanvas").style.background = 'white';
var context = myCanvas.getContext("2d");
var worldX = 100;
var worldY = 100;
//Draw a circle
/*context.beginPath();
context.arc(95, 50, 40, 0, 2 * Math.PI);
context.closePath();
context.fill();*/
thisCanvas.addEventListener("mousemove",seen_move,false);
function seen_move(e)
{
var bounding_box = thisCanvas.getBoundingClientRect();
worldX = (e.clientX-bounding_box.left) * (thisCanvas.width/bounding_box.width);
worldY = (e.clientY-bounding_box.top) * (thisCanvas.height/bounding_box.height);
}
function start_game()
{
setInterval(loop_game, 50);
}
function loop_game()
{
thisCanvas.width = thisCanvas.width;
update_world(worldX, worldY);
}
function update_world(x, y)
{
var world_img = new Image();
world_img.src = "images/world.png";
context.drawImage(world_img, x, y);
}
</script>
</body>
</html>
3 answers
solution1
3 ACCPTED 2015-04-24 01:39:39
var thisCanvas = document.getElementById("myCanvas").style.background = 'white';
thisCanvas now has the string value white .
thisCanvas.addEventListener() is basically like saying 'white'.addEventListener() . Because there's no String.prototype.addEventListener this won't work.
You need to assign document.getElementById("myCanvas") to thisCanvas and then set its background color.
solution2
1 2015-04-24 01:39:42
var thisCanvas = document.getElementById("myCanvas").style.background = 'white';
should be
var thisCanvas = document.getElementById("myCanvas")
You are trying to assign your canvas style-changing methods as variable thisCanvas , instead of assigning the canvas element itself
solution3
1 2015-04-24 01:41:56
The problem is with:
var thisCanvas = document.getElementById("myCanvas").style.background = 'white';
thisCanvas does not hold a reference to the <canvas> element. Instead, it's bound to 'white' because of a chained assignment.
You probably want something like:
var thisCanvas = document.getElementById("myCanvas");
thisCanvas.style.background = 'white';
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.