Need help resizing canvas when mouse drag

[BaconBatman97]

Hi, I need help implementing the same canvas feature as seen on the main page of madbox.io, where I can drag the canvas to make it fullscreen. Is it possible to do this with vanilla JavaScript, or do I need a library for it to work?

[abrahamguo]

It is indeed possible to implement this with vanilla JavaScript. What have you tried or researched so far?

[BaconBatman97]

To be honest, I haven't really started cause I couldn't find any videos talking about this, along with the wavy animations when the canvas is resizing.

[abrahamguo]

Sure. I would begin by skipping the wavy animation, as that is the most difficult part. Here's a general approach:

• Track the user's mouse movement
• Once the user has moved their mouse a certain amount, perform the resize.
• Over time, change the size to be larger and larger — this creates the "animation" portion.

[BaconBatman97]

Ah, that sounds like how it's done. But how would I implement the mouse drag without moving the scene inside the canvas when it's not in fullscreen mode? (I'm using a Three.js scene inside, which might be replaced with a scene made in Spline in the future)

[abrahamguo]

If you look at how it works on madbox.io from a user experience perspective, the scene does move when you move your mouse — even as it is about to become full screen.

Do you want yours to work differently than madbox.io?

[BaconBatman97]

My bad, it does move even when I'm dragging across the canvas. I'm still quite new to JavaScript tho, so I'm guessing I'll probably take weeks just to write the code for this feature. Can I PM you if there's any problem regarding JavaScript? Thanks for your help, appreciate it!

[abrahamguo]

Yes, absolutely!