• Tuesday , 20 November 2018

Canvas Bootcamp 14 – Mouse Coordinates JavaScript Tutorial

Code Canyon

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

3d Ocean

Related Posts


  1. it is mine it is mine
    December 5, 2017 at 12:57

    you are awesome

  2. sai pranav akella
    December 5, 2017 at 12:57

    what text editor do you use ?

  3. Chris Formitzi
    December 5, 2017 at 12:57

    These tutorials ROCK.  They are the best things going!!!  Change NOTHING!!!!!

  4. Another Games
    December 5, 2017 at 12:57

    Amazing man, thanks for clarifying mouse coordinates! 🙂

  5. August Tierney
    December 5, 2017 at 12:57

    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. Ed Ko
    December 5, 2017 at 12:57

    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.

  7. renewer
    December 5, 2017 at 12:57

    What is that you have on line four? Mine is not working and I do not have what you have on line four.

  8. adil dafrallah
    December 5, 2017 at 12:57

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

     <canvas id="canvas" width="500" height="500" ></canvas>

    Thank you for your time!!  ^___^

  9. Muhammad Gulraiz Ahmed
    December 5, 2017 at 12:57

    Hey Thanks, Adam Khoury, this video is very help full for me, to do my Class project about Canvas. Thanks.

  10. Ali K
    December 5, 2017 at 12:57

    Thanks a lot Adam!!! You are the best!!!!!!!!

  11. ChristFan868
    December 5, 2017 at 12:57

    How many parts will this series have? I think they're quite helpful. Thanks a lot Adam!

Leave A Comment

You must be logged in to post a comment.