Canvas / JS help needed

[Skykristal]

I need help resizing my canvas (my drawbox). Its set to 500px by 500px in the HTML which is too big for mobile screen/version and its also not aligning with my other boxes. When I edit the numbers the canvas acts weird and the background is gone.

Applying 100% width in CSS to canvas does exactly what I want visually but creates displacement of the drawn strokes.
I don't understand JS and googling it doesn't help me at all. I don't know what to add to my current js file for my specific project. Please don't explain it to me with words and terms, I don't understand it... 

drawbox is located here
https://skykristal.art/CoolStuff/

JS file
https://skykristal.art/CoolStuff/drawboxjs.js

I'd appreciate some help with this. thank you

[Melooon]

The script seems to depend on a fixed width/height for the canvas, and it uses whatever size the canvas is when it first loads (it should work for any size you set on the canvas style from what I can see, as long as that style is applied before the script is loaded) - when you draw, you're basically mapping pixels into a pixel grid thats the size of the canvas so it would not be possible to make it dynamically resize without VAST rewrites to the code to resize your drawing (or at least without making the canvas reset each time its resized)

I'd suggest the best solution would be to simply pick a fixed size and work around that. You could do some trickery to make the canvas zoom by modifying its scale transform in relation to your overall page width, but that might require scripting too and could be pretty complex to figure out as well! You could also put the drawbox in an overflowing iframe, but that might be weird!

[Skykristal]

The script seems to depend on a fixed width/height for the canvas, and it uses whatever size the canvas is when it first loads (it should work for any size you set on the canvas style from what I can see, as long as that style is applied before the script is loaded) - when you draw, you're basically mapping pixels into a pixel grid thats the size of the canvas so it would not be possible to make it dynamically resize without VAST rewrites to the code to resize your drawing (or at least without making the canvas reset each time its resized)

I'd suggest the best solution would be to simply pick a fixed size and work around that. You could do some trickery to make the canvas zoom by modifying its scale transform in relation to your overall page width, but that might require scripting too and could be pretty complex to figure out as well! You could also put the drawbox in an overflowing iframe, but that might be weird!

I would love to set a different fixed width/height (generally just making it a little smaller) but Like I mentioned, it erases the background (makes it transparent). I don't know much, but from what I understand when reading the script, it reads the width and hight specified in the HTML. which is 500px atm. idk why its doing that.

Also what does "style is applied before the script is loaded" mean? its placed at the very bottom of my HTML.. idk is that what you mean?

[Melooon]

it erases the background (makes it transparent).

It's not doing this for me; I can set the canvas to 300px wide and tall and it works perfectly!

Code

<canvas id="drawboxcanvas" width="300px" height="300px"></canvas>

its placed at the very bottom of my HTML

Yes this means your doing it correctly

[Skykristal]

It's not doing this for me; I can set the canvas to 300px wide and tall and it works perfectly!

Code

<canvas id="drawboxcanvas" width="300px" height="300px"></canvas>

okay VERY strange. It worked now. I tested this several times before... that's why I was so lost  browser bug?? but man that's awesome.

Yes this means your doing it correctly

ooooh okay. I get it now!

Thank you so much for helping me out