Drawbox/oekaki board compatible with neocities

[boreal_cryptid]

i suspect those were from someone with blocked "canvas", like @BlazingCobaltX. i also use LibreWolf, and it's blocking canvas by default (because it's fingerprinting iirc). i suggest to try to write to your visitors a reminder to check if their browser blocks canvas or not.
@candycanearter07 said: "To the left of the url, click the little picture icon and enable that, refresh, and it should work again."

[alienhospital]

Thanks so much for this code. I am using it on my site. Works great!

[nipchip]

Added it to my site and it works like a charm, thank you! No more Strawpage envy haha.
https://nipchip.com/mail/

Did made some code changes that perhaps someone reading this might find useful

• Set the value of the brush width slider to 2 with value="2". The javascript sets it to 2 on page load but the slider has a value of 50 by default if it isn't set explicitly. Now the slider starts at the left side.
• Remove the width and height from the canvas html, and instead set the width and height of the canvas to the size of its parent container in the script, so it initialises to a nice size for any screen resolution.

[KiwiMeowo]

Added it to my site and it works like a charm, thank you! No more Strawpage envy haha.
https://nipchip.com/mail/

Did made some code changes that perhaps someone reading this might find useful

• Set the value of the brush width slider to 2 with value="2". The javascript sets it to 2 on page load but the slider has a value of 50 by default if it isn't set explicitly. Now the slider starts at the left side.
• Remove the width and height from the canvas html, and instead set the width and height of the canvas to the size of its parent container in the script, so it initialises to a nice size for any screen resolution.

I was having problems with the size of the canvas in mobile, it always overflows outside the container. Thanks for mentioning this trick!

[Corrupted Unicorn]

Hellooo, I loved this idea since it was first published and I finally got to implement it on my website.      I could use some art to get started, but please, if it's a drawing dear to you, save a screenshot of them if you do draw because I'm still figuring out how to get them published 

Aside from that, I wanted to ask if there's the possibility to remove artwork (in case we get trolls or something  ) Could that be done through the spreadsheet?

[larvapuppy]

Aside from that, I wanted to ask if there's the possibility to remove artwork (in case we get trolls or something  ) Could that be done through the spreadsheet?

I was getting some religious propaganda in my drawbox but I was able to delete it all. All you have to do is delete the row in the spreadsheet where the drawing's image link is contained. (Make sure you double check it's the right one by visiting the link first of course, but as far as I know they're in order of submission.)

[Corrupted Unicorn]

I was getting some religious propaganda in my drawbox but I was able to delete it all. All you have to do is delete the row in the spreadsheet where the drawing's image link is contained. (Make sure you double check it's the right one by visiting the link first of course, but as far as I know they're in order of submission.)

Hey, thank you for your response! I just ran a little test for myself and I can confirm this works 

Now I have a little issue where you point on the canvas isn't exactly where you draw. I think this is caused because my canvas is smack dab in the center of the page while the original one is on the

left

, but I don't know how to fix this yet.  The canvas is still workable, but it could be tweaked even further. 

[larvapuppy]

@Corrupted Unicorn What did you do to centre your canvas? I centred mine as well, using css, but I don't seem to have this problem. It was a few months ago so I'm not 100% sure but I think all I did was contain it in a div with the id "drawbox" and then...

Code

#drawbox {
  margin:auto;
  width:600px;
}

[Corrupted Unicorn]

@Corrupted Unicorn What did you do to centre your canvas?

It's a plain ol' text-align:center; in the body, on my default .css! Do you think that's what caused this disconnect between the cursor and the paint? I tried what you proposed, yet it doesn't seem to work...

[larvapuppy]

Okay I took another look at my page and it looks like I lied, the canvas is actually left aligned but it's within the main content section of my page which is a flex element. The css I posted up there isn't actually doing anything; I deleted it and there was no change, so my bad. 

You might try making a flex box with "justify-content:center;", and putting a div element inside of that just to contain the drawbox-related code? I will try and look deeper into this later on when I have more time as well