CODEWITHSUNDEEP
javascriptcanvasdom-eventsmouseevent
Viraj Doshi
Viraj Doshi

Reputation: 891

How to move a canvas element on top of another canvas element

I have 2 canvas elements on top of each other and i want to move the canvas element on top on mouse drag but it produces weird results.

This is my code for the events (the variable cvs is the canvas element which is on top of other canvas element)

  var drag = false;
  cvs.addEventListener('mousedown', function(event) {
    drag = true;
  });
  
  cvs.addEventListener('mouseup', function(event) {
    drag = false;
  });

  cvs.addEventListener('mousemove', function(event) {
    if (drag) {
      const rect = cvs.getBoundingClientRect()
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      cvs.style.left = x + "px";
      cvs.style.top = y + "px";
      console.log(x, y);
    }
  });

When I drag the top canvas it starts to flicker back-and-forth between 2 positions

Upvotes: 1

Views: 636

Answers (1)

Carl Pryke
Carl Pryke

Reputation: 349

At a glance, it looks like you are using a relative value to set an absolute position.

So, first iteration, the left position updates to x, then the next iteration you subtract the last value of x from the mouse position. I think this is going to move it on and off screen.

say, clientX is at 100, and left is at 10.

T1 -> x = 100 - 10 = 90, T2 -> x = 100 - 90 = 10.

Hence the "flickering"

What you want to do, is take the relative movement value of the mouse and move the element by the same amount.

So on mouse down, record the mouse initial position and element initial position.

Subtract the initial mouse position from the mouse position on each mouse move iteration, and assign the initial element position plus the relative change to the element.


  var initialPosition = null
  var initialMouseCoords = null
  
  cvs.addEventListener('mousedown', function(event) {
    initialPosition = cvs.getBoundingClientRect()
    initialMouseCoords = {clientX: event.clientX, clientY: event.clientY}
  });
  
  cvs.addEventListener('mouseup', function(event) {
    initialPosition = null
    initialMouseCoords = null
  });

  cvs.addEventListener('mousemove', function(event) {
    if (initialMouseCoords) {
      const dx = event.clientX - initialMouseCoords.clientX;
      const dy = event.clientY - initialMouseCoords.clientY;

      cvs.style.left = initialPosition.left + dx;
      cvs.style.top = initialPosition.top + dy;
      
      console.log(dx, dy);
    }
  });

Bare in mind there are drag events depending on your use case, you might want to explore that as an alternative.

Upvotes: 1

Related Questions