Jump to content

Move Container in Canvas only to a certain point


Recommended Posts


I have a Canvas that is as large as the browser window (I want to support from 1080p to 4k). Currently I can move my container, which is most of the time larger than the canvas, I can move it around everywhere -> also out of the canvas vision. I want to restrict the container to only move out of the desired corner like about 30px. 

Please see the figures for a better understanding. I managed to get something like this with checking the current position of the container after very drag and drop and in this event to set the position of it to an allowed setting. But my solution does not work on different screen sizes. 



Fig – 1.png



Link to comment
Share on other sites

4 hours ago, Teckniel said:


Do you mean panning and zooming the canvas?
If so: here is a example: http://embed.plnkr.co/II6lgj511fsQ7l0QCoRi/


Thanks for your answer. Thats pretty much what I got so far. But I want to restrict the user from moving the outer yellow rectangle outside of my view (see the screenshot for a better understanding). 


Bildschirmfoto 2021-05-06 um 06.42.29.png

Link to comment
Share on other sites

When you handle the movement just add clamping to values that don't allow it to go any further.

So in your case if I assume that at 0,0 the container is at topleft of canvas then you could do something like this:


function clamp( min, max, value ) {
  return Math.min(max, Math.max(min, value));

const maxBorder = 30

container.x = clamp( maxBorder, container.width - canvas.width - maxBorder );
container.y = clamp( maxBorder, container.height - canvas.height - maxBorder);

Might be an error in the logic somewhere, dont have a proper testbed currently.

In that code you would call the clamping after you have set your containers position based on mouse movement.

Edited by Exca
Link to comment
Share on other sites

Oops, just noticed that I forgot to write Math.max and Math.min. I edited the above response to correct.

But basically this is how it works:

Let's say you have a value of 10 and your allowed range is 2-5.

First you take the maximum of range start (2) and your value (10). This returns 10 and if you had for example -1 as value then the value would be 2. So basically it sets the return value to range start or the value itself. Then do the same to end of range with minimum to get a value that's less than 5 and you end up with a value that's in wanted range.

You could also implement clampin to value with if statements:

function clamp( min, max, value)
  if( value < min) return min;
  if( value > max) return max;
  return value;  


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...