
JS Paint – A web-based MS Paint remake - hjek
http://jspaint.ml/
======
barbs
I haven't used Windows as a primary OS for years. I miss having MSPaint around
for small edits, and have yet to find a suitable replacement. Other apps
either have too few features (e.g. Preview) or too many (GIMP), or the
interface doesn't feel right. It might just be because I'm used to it after
using it for years when I was younger, but MSPaint's interface just makes
sense, and it hits the sweet spot of features for quick, simple edits.

This feels very similar to the original, and after a quick playthrough seems
feature-complete. Well done! I'm not sure how I feel about it being web-based
but I guess in this day and age it just makes it more accessible.

I see there's a Chrome app, but the link is broken
([https://chrome.google.com/webstore/detail/dgfedgcofbjmeohonb...](https://chrome.google.com/webstore/detail/dgfedgcofbjmeohonbpcoagiabgnddjh))

~~~
badsectoracula
> and have yet to find a suitable replacement

There are a few, Kolourpaint is pretty much an MSPaint clone for KDE [1] and
Paintbrush is the macOS equivalent [2]. There is also Gnome Paint [3], but
hasn't seen any update in years. I suppose the closest would be Pinta [4],
although that is slightly above MS Paint on the complexity level (probably
more comparable to Paint.NET than MS Paint).

> I'm not sure how I feel about it being web-based

Personally i find it amusing and impressive that this implements a Win95-like
GUI (i love Win95's GUI :-P) but at the same time the actual editing feels
very slow - painting something takes almost a second to update with the brush
being very jumpy, reminding me using ZSoft's PhotoFinish on Windows 3.1 on my
4MB 386:-P.

It is also nice that it has implemented the select+shift+drag brush feature
that is ignored by almost every other clone i've seen over the years.

[1]
[https://www.kde.org/applications/graphics/kolourpaint/](https://www.kde.org/applications/graphics/kolourpaint/)

[2]
[https://paintbrush.sourceforge.io/screenshots/](https://paintbrush.sourceforge.io/screenshots/)

[3] [https://launchpad.net/gnome-paint](https://launchpad.net/gnome-paint)

[4] [https://pinta-project.com/pintaproject/pinta/](https://pinta-
project.com/pintaproject/pinta/)

~~~
dingo_bat
> actual editing feels very slow - painting something takes almost a second to
> update with the brush being very jumpy, reminding me using ZSoft's
> PhotoFinish on Windows 3.1 on my 4MB 386:-P.

Works as fast as native paint on my laptop. What browser are you using?

~~~
pluma
Same here: no noticeable lag in Firefox on Ubuntu.

I'm guessing Safari on macOS?

~~~
rangibaby
no problem with Safari+Macos here

------
blt
The UI and behavior is amazingly close to the real thing. But I cannot help
but sigh when the brush tool lags more than Paint lagged on a 233 MHz Celeron.

I really think this is an awesome project, but I am old enough (30) to
remember fast performing GUI apps and I don't know if I'll ever "get over"
losing them.

edit: hopefully it is an inefficient implementation and not the inherent
slowness of web apps.

~~~
TeMPOraL
One thing I noticed is that it doesn't draw zoomed-in images correctly -
pixels are blurry. Didn't check if this is Canvas or WebGL, but something in
the code begs being changed from LINEAR to NEAREST.

(EDIT: turns out to be a Firefox issue; Chrome shows the sweet pretty pixels
correctly.)

> _I really think this is an awesome project, but I am old enough (30) to
> remember fast performing GUI apps and I don 't know if I'll ever "get over"
> losing them._

Same here (I'm 29). I'm getting tired of complaining, this literally feels
like trying to turn back the tide of a river. We're doomed to use slow _and
shitty_ software until the present web fads go away and the ecosystem
stabilizes.

~~~
laurent123456
> until the present web fads go away

I don't see that happening. Web apps gave us an environment where it's easy to
create complex applications quickly. Now efforts are going towards making
these apps smaller and faster, but I don't see developers going back to C++ to
develop GUI apps like this one.

~~~
kuschku
Java gave us an environment where it was easy to create complex applications
quickly as well.

The web will fade away just like Java did.

~~~
pjmlp
I do like Java, but sometimes get a bit pissed off how things went, because we
had "an environment where it was easy to create complex applications quickly
as well" in the form of Smalltalk, VB, Delphi and C++ Builder.

With the exception of Smalltak, all had native code generation, then Java
happened.

~~~
badsectoracula
VB (i assume you mean classic VB, not VB.NET) wasn't really an environment to
create complex applications though - at least not in VB itself. The best use
for VB would be to use to mix together components made in other languages
(often C and C++). If anything people who tried to use VB as the
implementation language for complex stuff regretted it later.

I agree about Delphi and C++ Builder though, but Borland seemed hellbent on
chasing enterprise unicorns - and pricing their products according to those
dreams - so the software and the ecosystem suffered because of it.

I'm not sure about Smalltalk since i haven't used it much to know, although
the first time i came in contact with was with a demo of IBM's VisualAge
Smalltalk that was given on a magazine coverdisk and i ran away screaming (ie.
deleted it immediately) when it took ages for the environment to load and do
anything on the 4MB 386 i had and even then after following the simplistic
tutorial it created an "executable" (that actually needed some other stuff to
run) that was like 10MB (which for my 130MB HDD was a gigantic waste of
space). Of course that was probably the entire image, but i didn't knew it at
the time - and it wouldn't change much really, i needed the space for games
and other stuff :-P.

I remember liking being able to drag arrows between elements in the GUI to
hook events and properties together. I haven't seen that bit in the little i
played with Pharo some time ago, i wonder if it was VA-specific. I tried to
run the demo when i got a better PC, but for some reason it wouldn't work in
Windows 95 and it has been years since i lost the disk. I wonder if it is
available somewhere online but all searches point me to IBM's pages that have
nothing.

~~~
pjmlp
Starting with version 5, VB allowed the creation of COM components natively,
and could generate pure native code, not like the previous versions that just
embedded the p-code inside a binary with a VM.

I have seen several enterprise level applications, with distributed objects
(DCOM) and transactions, written purely in VB.

Including my first sight of an "Electron" app, exposing several COM libraries,
written in VB, into a MSHTML container, using those objects from JScript in
the page!

Regarding Borland, when Java came into picture, the company was still doing
alright, and their Java development environment was designed similarly to the
Delphi and C++ ones.

Their problems and change of focus came afterwards, when they lost a few
people to Microsoft, including Anders, whose first project was to design
Microsoft's Java implementation, J++.

~~~
badsectoracula
VB5 indeed allows that (i have a VB5 box i got off ebay some time ago :-) and
i've spent a lot of time with that and with CCE before that), but the language
isn't really that friendly towards complex applications. But FWIW i think that
VB lost its way around version 4 or 5 anyway :-P.

About Borland and Java, i actually have JBuilder 2 (again off ebay - i collect
old development software :-P) and yes it does look nice and sort of friendly
(although it is far from Delphi's level of ease of use). I think the entire
thing is built on Java too. Sadly it doesn't seem to work in modern Windows -
even the applications it creates throw exceptions.

------
wybiral
Neat, there's a multi-user mode:
[http://jspaint.ml/#session:test](http://jspaint.ml/#session:test)

~~~
exikyut
It's currently being destroyed. It's AWESOME

~~~
mitchellst
Come for the 90's nostalgia. Stay for the websocket fight in a phonebooth.

~~~
wybiral
That was chaos...

------
cessor
The site works nicely in my browser (Chrome).

I feel like this mockumentary is not getting enough credit:

[https://www.youtube.com/watch?v=K9L03GycSZw](https://www.youtube.com/watch?v=K9L03GycSZw)

\- "We worked for eight months in a facility in California to figure out what
were the best twelve colors to include in Paint"

\- Can we make this line thinner? \- No. \- Ok.

I have not used Paint for any real work in the past, other than saving
screenshots. Ever since MS started shipping the snipping tool, I hardly use
this function.

------
bn-usd-mistake
This is awesome! Please consider adding a license so we can self host it [2]
Github has a helpful website [1] on choosing a license, I personally like MIT
but it's your choice and there are plenty of options :)

[1] [https://choosealicense.com/](https://choosealicense.com/) [2]
[https://github.com/1j01/jspaint/issues/18](https://github.com/1j01/jspaint/issues/18)

------
notaboutdave
Be careful if you're browsing fullscreen.

Here I am casually clicking HN posts when suddenly my brain thinks it's the
90s.

~~~
dingo_bat
I wasted 15 minutes drawing random shapes too.

------
pi-squared
Oh My, so many memories, so many hours spent on this program. Such a fan of
MSPaint, thank you for doing this, absolute hero!

Few nitpicks and more of showing off how much I care and love what you've
done:

* polygon is antialiasing - it shouldn't * rubber cursor is wrong * circle and rounded rectangle tools are filling their insides when they shouldn't * Text works in zoom mode - it didn't used to (not sure if bug or feature) * Color picker is way too modern :D

But man, even stretch/skew are implemented, awesome job!

------
tarr11
Github Repo:
[https://github.com/1j01/jspaint](https://github.com/1j01/jspaint)

------
Raphmedia
The attention to detail is amazing. Almost every feature is there and responds
as it would on a real windows computer. There's even the help screen.

~~~
cjlm
Shame that it uses the native colour picker...

------
vortico
I love how the filesystem stuff is handled! Very smooth, with Open/Save acting
like a native application.

~~~
computerex
It's not _acting_ like a native application, the open file dialog _is_ the
native open file dialog that'll display differently depending on the
OS/platform you're on.

~~~
vortico
Right, but many websites have a "Browse for file..." or Import/Export popup
which then launches the native file dialog, or the Save function opens the
image in a new tab or something. They're making it as close as technically
possible to MSPaint's behavior.

------
em3rgent0rdr
1\. Instantaneous startup. 2\. Simple, familiar GUI. 3\. Automatically saves
file locally, files can by loaded by url.

I wish more webapps were like this.

------
air7
I love labors of love like this. It seems that beyond the goal of being
useful, there's a strong nostalgic theme to the project which is apparent in
the attention to the detail in recreating the old interface as exact as
possible. Check out the Help Topics...

------
dluan
What is really neat is that I guess this is what's implemented in the Windows
98 remake too :)

[http://98desktop.ml/](http://98desktop.ml/)

I wish computers looked like this again.

~~~
hjek
It's actually the same implementation used there. (See Help -> About Paint)

------
ttflee
#Offtopic

TIL, MacPaint 2.0 was sold for US$125. And that MacPaint 1.3's source code was
provided to Computer History Museum due to support of Steve Jobs.

Maybe it's time to email Bill Gates?

[https://en.wikipedia.org/wiki/MacPaint#Release_and_version_h...](https://en.wikipedia.org/wiki/MacPaint#Release_and_version_history)

------
slampig
It's missing the zoom bug, which lets you zoom all the way to 10x by clicking
just under the 8x button. Personally I was very fond of that.

~~~
ygra
There's an issue for that:
[https://github.com/1j01/jspaint/issues/35](https://github.com/1j01/jspaint/issues/35)

------
reustle
You have no idea how much this means to me <3

------
xeeeeeeeeeeenu
I'm amazed. This webapp even supports opening files via dragging them from the
desktop or Windows Explorer. This fact alone makes it more "native" than most
(all?) UWP applications.

------
Lio
I wonder if “Jim’ll Paint It” has seen this?

He’s got to be the highest profile MS Paint user in the world by now.

[https://jimll.co.uk/](https://jimll.co.uk/)

Edit: For those who don’t know Jim, from the website:-

“Jim'll Paint It is an ongoing collaboration between Jim and the thousands of
complete strangers who send him their weird and wonderful ideas. Using
Microsoft Paint, Jim has painted hundreds of suggestions ranging from the
sublime to the ridiculous - each free of charge.”

------
qwerty456127
Funny but I would really appreciate a good Paint.Net remake (usable on Mac,
Linux and OpenBSD) more.

~~~
hjek
Pinta comes close to that, and is free software, unlike Paint.NET.
[https://pinta-project.com/pintaproject/pinta/](https://pinta-
project.com/pintaproject/pinta/)

~~~
GordonS
I thought Paint.NET was free, just not OSS? I installed it on a machine a few
weeks ago, no payment changed hands..

~~~
qwerty456127
It's free but still Windows-only. I use it on Windows machines but miss it
heavily on Mac and Linux. Perhaps somebody would actually port it to Mono if
it was truly free.

~~~
ygra
It has too many dependencies beyond .NET and Windows Forms by now. Text
rendering is DirectWrite, for example, other parts use Direct2D, the UI
partially uses WPF as well if I remember correctly.

~~~
qwerty456127
I see... I used to think it's just WPF to be replaced with the old UI that was
there until some version.

------
redleggedfrog
Breaks the back button in Firefox.

------
bobajeff
Props for them for getting all the features work smoothly on a phone as well.

------
tim--
There is a hidden 'Extras' menu which provides additional functionality, like
shared whiteboard screens :)

[http://jspaint.ml/#session:tim](http://jspaint.ml/#session:tim)

------
aj7
The most valuable thing to me about MS Paint is the ability to print screen,
CROP the largely extraneous material, and post, embed, or transmit the result.

Where is crop? I am not interested in the drawing with a bar of soap aspect.
At all.

~~~
chrismorgan
Paint didn’t have the ability to crop to a selection until the Windows 7
redesign of the app with its ribbon UI (not sure about the Vista version of
Paint, which is halfway between the XP and the 7 versions); JS Paint has
copied the XP and earlier design, not the newer. You can still crop, but only
from the bottom or right, because you’re using the canvas resize handles
instead.

Concerning your specific task: I’d say the Snipping Tool (built-in from at
least Windows 7 onwards) is generally superior for that sort of thing anyway.
Its biggest problem is slow start-up.

~~~
TeMPOraL
You could do cropping in Paint since at least the Win95 version. The method
was the same I use with Paint to this very day: a combination of canvas resize
handles and moving the image contents. Basically, after pasting the picture, I
would use the selection that is automatically activated (if you lose it,
CTRL+A to select all) to crop out top and left parts of the image, by
positioning the top-left corner of what I care about at the top-left corner of
the canvas. I would then use the bottom-right "resize canvas" handle to crop
out the rest.

"That's how Dad did it, that's how America does it, and it's worked out pretty
well so far."

~~~
gvx
I'd select the section I'd want to crop, copy it, create a new image, resize
it to 1x1 or something else small, then paste. The canvas would automatically
resize to fit the pasted selection. It sounds a bit more involved than your
version, but for me it worked.

~~~
TeMPOraL
Yeah, I noticed this mechanism (probably even used it a few times), but I
eventually gravitated towards something with less clicking.

I do that in Paint.NET a lot, though. I select the part of the image I'm
interested in, and then in two keyboard presses (CTRL+C, ALT+CTRL+V, AFAIR) I
copy it and "paste into new image".

------
gao8a
This is amazing! Thank you for sharing this

~~~
jackaroe78
+1

------
jiujieti
Have seen a Dutch artist using MS Paint to create his/her work in Hermitage
museum. Quite impressive. It's a shame I cannot remember the artist's name any
more.

------
zingmars
On Firefox there's noticeable lag, and non-straight lines look kind of weird
(feels like it's trying to make non-straight lines out of bunch of straight
lines).

On chrome there's no lag, but every time I draw something, all other elements
I drew before change colour. At first to bright green, then they just fade to
white as I draw more lines or whatever. As it is right now, it's definitely
not a good 'replacement'.

------
m3andros
I love this! Genius!

I personally use Figma ([http://figma.com](http://figma.com)) - which is an
incredible vector drawing tool!

~~~
2III7
Been using Figma for a while now for prototyping, drawing etc. It's really
easy to learn and use and has great features. e.g. multiplayer mode.

------
arketyp
MSPaint had some hidden treasures. The first thing I tried was the right-
click-while-drawing-cancel feature. Alas. Love seeing the old graphics
however.

~~~
tomsmeding
That's an actual issue in the repository. It's supposed to have worked before,
but apparently broke in a recent Chrome update, sparking a re-implementation
that broke in all browsers.

------
mschuetz
Now make a desktop app out of this using electron!

~~~
ygra
There's an issue for that:
[https://github.com/1j01/jspaint/issues/2](https://github.com/1j01/jspaint/issues/2)

------
hjek
Today the author added support for transparency, and thereby also shift+left-
click brushes from current selection. My most favourite MS Paint feature.
[https://github.com/1j01/jspaint/issues/23#issuecomment-35851...](https://github.com/1j01/jspaint/issues/23#issuecomment-358516049)

~~~
zekrioca
Thanks for update. I was wondering about that too.

------
sillysaurus3
Aww. I selected an area then tried to use the arrow keys to translate one
pixel at a time. Didn't work :(

Then I tried to cut and paste. No go.

Still, very promising!

------
KennyCason
This is amazing! Superb remake. :)

I’m happy and sad. Happy because MS Paint is amazing and now having it in web
form is great. Sad because I was just talking about doing this this week for
hackathon. I ultimately did something else, and probably wouldn’t have turned
out this great.

------
danschumann
The oval tool doesn't respect the fill setting. It is always opaque!
Otherwise, fun project! Now, make a js version of photoshop! (I've done
several js painting programs, some with pretty unique brushes and weird
"helpers".. they're pretty much all in my private repo doing nothing lol)

------
mxuribe
I still on occasion use MS Paint. I know there have been other tools
introduced since MS Paint with more features and such...but much like a trusty
*nix command line tool that's always there and always trusty...I hold a
special fondness for this classic program. Kudos to the author for this
project!

------
candiodari
Upon opening the page it allocates 12 times the amount of memory I had in the
computer I first used MS Paint on. God only knows how much processing power
it's using.

Also, I get the distinct impression it's less responsive than that computer
used to be.

------
adamwi
Really brings you back to the good old days =) Even got the help topics
exactly as in the original

------
frylock
Can someone explain to me how the live sessions feature was built? I was
looking through the projects github, and saw something about firebase, but I'm
not too sure how it works.

------
omegote
And built with jQuery. Yeah, I can feel the burn of those edgy react and
angular devs...

~~~
peterburkimsher
I like JS Paint, because everyone is already familiar with the GUI and it
should "just work" on any platform thanks to being a web app.

The problem with JS Paint for me is that it doesn't run in my somewhat old
version of Safari; I had to open Chrome/Firefox just to test it. For something
to really be universal, it needs to work on every platform, including non-
jailbroken old iPhones and Macs with their default browser (yes, I'm making an
analogy between Safari and Internet Explorer).

------
charbz
This is amazing , really brings me back to those sweet old days. Just curious,
is this built with any JS framework ? the code looks like its vanilla JS !!
which is fantastic .. and is it open source / Github project ?

------
gbraad
It is not that useful as MS Paint. Several people use it for pixel-precise
artwork, just like Deluxe Paint was used on DOS and the Amiga. However, this
editor draws single OR double pixels on lines that are freehand.

~~~
Doxin
> this editor draws single OR double pixels on lines that are freehand.

So does MS paint.

------
rsnickell
Atwood's Law in full effect here!

[https://blog.codinghorror.com/the-principle-of-least-
power/](https://blog.codinghorror.com/the-principle-of-least-power/)

------
sethammons
Seriously cool. Love the old school UI. It immediately put a smile on my face.
It works great on mobile. I did find a bug though. If I switch to red, I can't
switch back to black. Android, chrome.

------
Hendrikto
Shapes are always filled with an outline, no matter which option I choose.
Apart from that it looks really good, and I don‘t have performance problems
that some people report.

------
piyush_soni
Does it work for everyone in Firefox? For me it doesn't draw anything, nor
does it open any of the menus (just clicks work). In Chrome everything works
perfectly for me.

~~~
chungy
Works fine for me, Firefox 57.0.4 on Linux.

~~~
piyush_soni
Thanks for confirming. I need to investigate what's wrong with my FF then.

------
ewi_
Great work! it brings back so many memories =) I was trying it in Chrome on
iOS and it seems that it considers each color square as a text entry, kinda
annoying

~~~
blablabli
I have the exact same feeling, this feels so nostalgic

------
asnee
Here's another session for my mates

[http://jspaint.ml/#session:asnee](http://jspaint.ml/#session:asnee)

------
SubiculumCode
I never got people's love of MS Paint. There is so little it could do, and it
didn't always want.to play nice with modern image formats.

~~~
kabes
Nostalgia. Many of us spend hours making drawings as a kid, since it was
basically the only thing to do next to mine sweeper. Just like we all miss
clippy, useless as he was.

~~~
jhbadger
But even then, MS Paint was pretty much a copy of 1984's MacPaint, which
pioneered that type of program.

~~~
gvx
Nostalgia doesn't cite sources. I've never used MacPaint. I've used MS Paint,
though, pretty extensively, all through the 2000s.

------
kroltan
The author forgot that one could further increase or decrease the size of the
eraser and brush tools by pressing Ctrl++ and Ctrl+-.

Other than that, really nice!

------
ashwinaj
Oh...those lovely childhood memories using MS Paint on Windows 3.1 (although
this looks like the Win 98 vesion)..thanks this is awesome!!

------
whatyoucantsay
Imagine an Electron app of this! Then JS paint could be run right from the
desktop.

------
trungdq88
That's interesting, I guess the author have that same feeling with me when I
tried to create the same thing with Windows 7 on my personal website
[https://dinhquangtrung.net](https://dinhquangtrung.net), just that my Windows
7 is not ready feature complete because I was too lazy, haha.

------
evolveyourmind
Amazing. It looks identical. Unfortunately, can’t save images from safari on
iPhone.

------
glemmaPaul
Gives back so many feels of bored painting projects I've done before

------
qntl
Patina is a good MS Paint-like, on the Mac App Store for two dollars or so.

------
evolveyourmind
Amazing. It looks identical. However, can’t save images on iPhone.

------
g105b
Please turn off anti aliasing and it will be perfect!

------
rmrfrmrf
I've been waiting for this my entire life.

------
O_H_E
Really works well with touch screen, kudos

------
opvasger
YES - thank you!

------
z3t4
Would be nice if it could output SVG!

~~~
ygra
I'm not sure

    
    
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          <image xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="data:..." width='800' height='600'/>
        </svg>
    

is a particularly interesting SVG image that has any benefits over the
equivalent PNG.

~~~
z3t4
I mean that the image should be saved in vector format! Not bitmap.

~~~
ygra
Paint is a bitmap image editor. What would you like the result to be? A <rect>
for every pixel placed by the pencil tool?

~~~
z3t4
The pencil tool could create a svg path.

------
tlog333
Love the keyboard shortcut support!

------
aj7
Where is crop? To me, the most valuable tool in MS Paint. What? Did you think
I used it for “drawing with a bar of soap?”

~~~
Liquid_Fire
I don't think Paint (at least the version this is replicating) had a crop
feature.

I always used to do:

\- Ctrl-A (Select All)

\- Ctrl-X (Cut)

\- Ctrl-E, 1, Tab, 1, Enter (Resize image to 1x1 pixel)

\- Ctrl-V (Paste)

------
fokker
Has the help menu and all hahaha

------
popnroll
[https://imgur.com/I66J4Ys](https://imgur.com/I66J4Ys)

------
Kip9000
Killer App

------
nvr219
INSANE

------
needz
I don't understand why it needs to hijack the back button.

~~~
1j01
It changes the URL to store the image in a specific session, so if you close
the tab by accident you can reopen it from history (or ctrl+shift+t in some
browsers)

I've opened an issue for it now here:
[https://github.com/1j01/jspaint/issues/49](https://github.com/1j01/jspaint/issues/49)

