Javascript Onclick Functions

Question

Writing a simple script to have two buttons. One button animates a "painting" feature where rectangles follow the cursor around the canvas. The other button would display a rectangle that follows the canvas but doesn't leave a trail like the other. I have the buttons linked to do different functions. Right now the follow button doesn't work, it does clear the canvas but it still allows you to paint. It seems that the paint function is still running after I hit the follow button. Any help is appreciated.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<input type="button" value="Paint" onclick="isPaint()">
<input type="button" value="Follow" onclick="isFollow()">
<canvas id="myCanvas" width="500" height="500"></canvas>

<script>

function isPaint(){

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

//change draw color
ctx.fillStyle = "#FF0000";


ctx.clearRect(0,0,500,500);

canvas.addEventListener("mousemove", function(event) {
    ctx.fillRect(event.x,event.y,10,10);    
})
}


function isFollow(){

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

//change draw color
ctx.fillStyle = "#FF0000";

ctx.clearRect(0,0,500,500);

    }

</script>
</body>
</html>

You clearly know how to use addEventListener, not read up on removeEventlistener, and remove the inline javascript and you'll figure it out. — adeneo
– adeneo, Commented Apr 10, 2014 at 15:34
Hard to read up when I didn't know what was causing it. Everyone starts somewhere. Thanks for the help though — user2980869
– user2980869, Commented Apr 10, 2014 at 15:41

Arthur · Accepted Answer · 2014-04-10 15:36:29Z

1

Work for me : http://jsfiddle.net/XF7m4/1/

Using document.getElementById("paint").onclick= function (){

PS :And think to remove the mousemouse listener ;)

answered Apr 10, 2014 at 15:36

Arthur

5,1783 gold badges37 silver badges65 bronze badges

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

2 Comments

user2980869 Over a year ago

When I use that the follow still paints, when all its currently set to do is clear the canvas

user2980869 Over a year ago

Thank you for your help as well. Its starting to make sense now :)

Tanzeel Kazi · Accepted Answer · 2014-04-10 15:41:45Z

1

To achieve what you are trying to do you will need to enhance your code a little more.

The main idea is to bind the mousemove event only once and clear the canvas if it is to behave like a follow.

Try using the following code:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Canvas</title>
    </head>
    <body>
        <input type="button" value="Paint" onclick="CanvasPainter.paint()" />
        <input type="button" value="Follow" onclick="CanvasPainter.follow()" />
        <canvas id="myCanvas" width="500" height="500"></canvas>

        <script type="text/javascript">

        (function () {

            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');

            //change draw color
            ctx.fillStyle = "#FF0000";


            var CanvasPainter = {
                isPaint: false,

                isFollow: false,

                paint: function () {
                    this.isPaint = true;
                    this.isFollow = false;
                    return;
                },

                follow: function () {
                    this.isPaint = false;
                    this.isFollow = true;
                    return;
                }
            };

            window.CanvasPainter = CanvasPainter;

            canvas.addEventListener("mousemove", function (event) {
                if (CanvasPainter.isPaint || CanvasPainter.isFollow) {

                    if (CanvasPainter.isFollow) {
                        // Clear canvas on every mousemove if it is a follow
                        ctx.clearRect(0, 0, 500, 500);
                    }

                    ctx.fillRect(event.x, event.y, 10, 10);
                }
                return;
            });

            return;
        })();
        </script>
    </body>
</html>

Hope this helps!

answered Apr 10, 2014 at 15:41

Tanzeel Kazi

3,8371 gold badge20 silver badges22 bronze badges

3 Comments

user2980869 Over a year ago

Thank you very much for this! This way makes more sense. I wanted an if statement but wasn't sure how to go about it. Thanks again

Tanzeel Kazi Over a year ago

@Arthur it was made by modifying the OP's code even if it is only a little.

Tanzeel Kazi Over a year ago

@user2980869 You're most welcome! However I wonder why you didn't mark this as the answer. :)

ptorian · Accepted Answer · 2014-04-10 15:36:48Z

0

Your isPaint() function is adding an event listener for "mousemove" to the canvas, but it isn't getting removed in the isFollow() function. If you remove your listener in the isFollow() function this should fix your problem.

answered Apr 10, 2014 at 15:36

ptorian

12 bronze badges

1 Comment

user2980869 Over a year ago

Looking this up now. Thank you for the help

Collectives™ on Stack Overflow

Javascript Onclick Functions

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related