DEV Community

Build a Web Paint Application

Anshika on September 07, 2022

How exciting is it to build something you grew up using? I'm pretty sure that most of you have used Microsoft Paint. Didn't we all feel like Picas...

Read full post

Michael Tharrington • Sep 13 '22

This is super cool! Nicely done. 🙌

If you're going to continue the trend of rebuilding old MS tech for the web, I'd like to suggest bringing back Clippy as a browser extension, haha! 😀

Anshika • Sep 15 '22

Sure, I'll give it a try.

Michael Tharrington • Sep 15 '22

Oh what?! That would be so cool. 🙌

Maybe it could give writing advice in the DEV editor, haha! Almost like a Grammarly. Or if ya wanted to make it a joke, it could give out bad writing advice, lol.

If you do make a Clippy clone for the browser, whichever direction you take it, I'd be so siked to read about it! 😀

Anurag Prasoon • Sep 7 '22

Nice Blog , Anshika

Thomas Bonnet • Sep 7 '22

Oww so cool ! 🤩

acoder • Sep 8 '22

It took you a lot of time to create this, thanks.

decker • Sep 8 '22

Nice one, thank you.

MUHAMMED YILMAZ • Sep 9 '22

easy tutorial. Thanks :)

Codeitdoc7 • Sep 9 '22 • Edited

Now its time to wake up the artist in my friend 😄.

Thanks @anshika_gautam_ its a great article.

Anshika • Sep 10 '22

Haha! Definitely!

Vincent A. Cicirello • Sep 7 '22

Fun little web application. Very nice.

Al - Naucode • Sep 7 '22

Really cool project, good job!

Bishwas Bhandari • Sep 8 '22

Looks cool, thanks for sharing.

Anshika • Sep 15 '22

What should I write about next?

Codeitdoc7 • Sep 17 '22

How to wake up writer in your friend 😸

tatra • Sep 14 '22 • Edited

For the curious, everything works as copy pasted except for mouse cursor position

// initialize position as 0,0
var pos = { x: 0, y: 0 };

// new position from mouse events
function setPosition(e) {
  pos.x = parseInt(e.clientX - offsetX);
  pos.y = parseInt(e.clientY - offsetY);
}

or adding event listeners to the document (not window)

document.addEventListener("mousemove", draw);
document.addEventListener("mousedown", setPosition);
document.addEventListener("mouseenter", setPosition);
document.getElementById("color-picker").addEventListener("change", colorPick);
setColor();

Anshika • Sep 15 '22

Mouse cursor position has to be manipulated according to your preference and viewport size. You can change the x and y position as per your convenience. And I didn't understand what is not working for you in event listeners. Can you elaborate?