D4mations.com

Canvas Bootcamp 14 – Mouse Coordinates JavaScript Tutorial



Lesson Code: http://www.developphp.com/video/JavaScript/Detect-Mouse-Coordinates-on-Canvas
In this exercise we are going to cover one of the most crucial aspects of making interactive canvas applications with JavaScript. We will demonstrate how to read or capture the user mouse coordinates upon specific events.

Original source

d4mer

, , , , , , , , , , ,

11 responses to “Canvas Bootcamp 14 – Mouse Coordinates JavaScript Tutorial”

  5. Alright, I understand everything in this video. I'm just curious. After making the rectangles show up where the clientX, ClientY clicks, how would I precede to animate the rectangles? Like for instance, to make the rectangles to slide down the screen.

  6. If you create an element and add ID attribute to it, browser will automatically create a variable equal to its ID and referencing it to that element. So you don't need to create the "status" variable and assign "document.getElementById('status')" because "status was already created, you can just type "status" without creating a var and it's equal to "document.getElementById('status')" already.

    great videos btw, im learning a lot. thanks.

  8. Hey Adam, thatnk you for this greate video! Please I have a question to ask you; I've tried many ways to create a circle enstead of a box. see this code which id did not work with me.

    <!DOCTYPE html>
     <html>
     <head>
     <style>
     </style>
     <script>
    window.onload = function () {
    var canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    var x1 = 50;
    var y1 = 50;
    var moving, move;

    ctx.canvas.addEventListener("mousedown", function(event){ moving= true; move(event); });
    ctx.canvas.addEventListener("mousemove", function(event){ move(event); });
    ctx.canvas.addEventListener("mouseup", function(){ moving= false; });

    function move(event){
    if (moving){
    var mouseX = event.clientX – ctx.canvas.offsetLeft;
    var mouseY = event.clientY – ctx.canvas.offsetTop;

    x1 = mouseX;
    y1 = mouseY;

    ctx.clearRect(0, 0, 500, 500);
    ctx.fillStyle = "red";
    ctx.arc(mouseX, mouseY, 15, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
    }
    }

    }
     </script>
     </head>
     <body>
     <canvas id="canvas" width="500" height="500" ></canvas>
     </body>
     </html>

    Thank you for your time!!  ^___^

Leave a Reply