How can I obtain distinct coordinates for clientX and clientX in JavaScript?

Question

How can I obtain distinct coordinates for clientX and clientX in JavaScript?

I am attempting to recreate a painting API using canvas. I am facing an issue where JavaScript only seems to retain one coordinate instead of two for drawing a rectangle.

Below is my code snippet:

var x_1;
var y_1;
var x_2;
var y_2;
var tab_coord;

function coord(evt) {
x_1 = evt.clientX;
y_1 = evt.clientY;
console.log("coordinate x_1: " + x_1 + " y: " + y_1);
tab_coord={'x_1': x_1, 'x_2':y_1};

canvas.addEventListener('click', second_coord);
}
function second_coord(evt) {
console.log(tab_coord);
x_2 = evt.clientX;
y_2 = evt.clientY;

console.log("coordinate x_2:" + x_2 + " y: " + y_2);
}

Even though the

console.log("coordinate x_1: " + x_1 + " y: " + y_1)

displays the first coordinate properly, JavaScript fails to store it in the tab_coord. Therefore, the console.log(tab_coord) shows the coordinates of x_2 and y_2 instead of x_1 and y_1 as intended.

javascript

Answer 1

Answer №1

It's inefficient to add the event listener on every click. Instead, you can use a single click handler to manage different actions.

Take a look at this:

This code creates a canvas that occupies the entire screen, sets x1 and y1 to undefined, attaches an event listener to the canvas when it loads, and executes shape functions based on the value of shape, which contains various types of shapes.

To create a rectangle, you need to calculate the width and height by subtracting x1 from x2 and y1 from y2.

If you use a two-click function, x2 and y2 are unnecessary.

var C=document.createElement('canvas'),
    c=C.getContext('2d'),
    x1,
    y1,
    shape='rect';
    C.width=window.innerWidth;
    C.height=window.innerHeight;
    C.style.cssText='position:fixed;top:0;left:0;';
    document.body.appendChild(C);
    C.addEventListener('click',handler,false);

function handler(e){
 shapes[shape](e);
}

shapes={    
 rect:function(e){
  x1? // Make sure x1 is not 0 because it will be interpreted as false.
  (c.rect(x1,y1,e.clientX-x1,e.clientY-y1),c.stroke(),x1=y1=false):
  (x1=e.clientX,y1=e.clientY);
 }
 //Add more shape functions here.Or fill whatever....
}

DEMO

http://jsfiddle.net/yY8EX/

Demo with circle

http://jsfiddle.net/yY8EX/2/

If you have any questions or need clarification, feel free to ask.

Answer 2

It's inefficient to add the event listener on every click. Instead, you can use a single click handler to manage different actions.

Take a look at this:

This code creates a canvas that occupies the entire screen, sets x1 and y1 to undefined, attaches an event listener to the canvas when it loads, and executes shape functions based on the value of shape, which contains various types of shapes.

To create a rectangle, you need to calculate the width and height by subtracting x1 from x2 and y1 from y2.

If you use a two-click function, x2 and y2 are unnecessary.

var C=document.createElement('canvas'),
    c=C.getContext('2d'),
    x1,
    y1,
    shape='rect';
    C.width=window.innerWidth;
    C.height=window.innerHeight;
    C.style.cssText='position:fixed;top:0;left:0;';
    document.body.appendChild(C);
    C.addEventListener('click',handler,false);

function handler(e){
 shapes[shape](e);
}

shapes={    
 rect:function(e){
  x1? // Make sure x1 is not 0 because it will be interpreted as false.
  (c.rect(x1,y1,e.clientX-x1,e.clientY-y1),c.stroke(),x1=y1=false):
  (x1=e.clientX,y1=e.clientY);
 }
 //Add more shape functions here.Or fill whatever....
}

DEMO

http://jsfiddle.net/yY8EX/

Demo with circle

http://jsfiddle.net/yY8EX/2/

If you have any questions or need clarification, feel free to ask.

How can I obtain distinct coordinates for clientX and clientX in JavaScript?

Answer №1

Similar questions

Searching in React can be done dynamically by referencing an array, similar to how the "LIKE" function works in SQL

Beginner in React: Tips for modifying a component installed using npm

d3 bar chart with overlapping bars - define x and y coordinates

What is the best way to retrieve all the values of a specific field from a store?

Optimizing Wordpress Plugin Configurations

Continuously encountering the 403 Forbidden error when making a POST request to the

Tips for ensuring the footer always stays at the bottom of the page

Mastering the art of chaining promises in Mongoose

Nodemon isn't functioning properly: nodemon isn't loading as expected

Guide to making an object with a value sourced from the redux store

When you try to create a popover, a cautionary message pops up indicating that $tooltip is no longer supported. It is

What is the best way to retrieve data based on conditions in React?

When the mouse button is released or when an event listener is

Is there a regular expression that can identify whether a string is included in a numbered list?

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

triggering a function from a child component in React

Enhancing mongoose find queries in Node.js with dynamic conditions using both AND and OR operators simultaneously

Having trouble passing a jQuery string value into a Google Map object within a loop

Is it possible to update the total price on Shopify using CartJS and JavaScript?

Methods for validating React-Router navigation via history.push by utilizing Jest?