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>

Sebastian Simon · Accepted Answer · 2015-04-24 01:39:39Z

3

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.

answered Apr 24, 2015 at 1:39

Sebastian Simon

19.8k8 gold badges61 silver badges88 bronze badges

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

Comments

nicholaswmin · Accepted Answer · 2015-04-24 01:39:42Z

1

    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

answered Apr 24, 2015 at 1:39

nicholaswmin

23.2k16 gold badges103 silver badges175 bronze badges

1 Comment

Max Atkins Over a year ago

Thanks, that worked. I've added the background style to the css page.

Noah Freitas · Accepted Answer · 2015-04-24 01:41:56Z

1

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';

answered Apr 24, 2015 at 1:41

Noah Freitas

17.5k11 gold badges53 silver badges67 bronze badges

Collectives™ on Stack Overflow

HTML5 Canvas and JS - Mouse Movement, strange error

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related