Give the HTMLCanvasElement relative mouse coordinates {[0,1],[0,1]} - Node.js DOM

Node.js examples for DOM:Element

  1. HOME
  2. Node.js
  3. DOM
  4. Element

Description

Give the HTMLCanvasElement relative mouse coordinates {[0,1],[0,1]}

Demo Code


/* ---------------------------------------------------------------------------------------
This jsaSound Code is distributed under LGPL 3
Copyright (C) 2012 National University of Singapore
Inquiries: director@anclab.org//  ww  w.j  a va 2 s.c  o  m

This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation; either version 3 of the License, or any later version.
This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNULesser General Public License for more details.
You should have received a copy of the GNU General Public License and GNU Lesser General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>
------------------------------------------------------------------------------------------*/
/*
Author: Lonce Wyse
Date: July 2012
*/
//---------------------
// give the HTMLCanvasElement relative mouse coordinates {[0,1],[0,1]} 
// args: 
function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do{
      totalOffsetX += currentElement.offsetLeft;
      totalOffsetY += currentElement.offsetTop;
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {x:canvasX, y:canvasY}
  }
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;

Related Tutorials