JS Paint – A web-based MS Paint remake
jspaint.ml
jspaint.ml
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...)
ReactOS has its own Paint, I wonder... it may be simple to compile it through winelib, or just run it directly via Wine. That'd be a pretty quick and legal way to get a functionally-identical clone.
Screenshot: https://rymc.io/mspaintosx.png
The interface is a bit different than MS Paint but it has these absolutely wild features, like colour cycling, where the colours can change while you're painting, which can be fairly psychedelic. GrafX2 is more of a clone of DeluxePaint for Amiga.
I'm no fan of mtPaint either.
However, there are tons of lightweight image editors that run as fast as MS paint and offer more features; have you tried Pinta ? or gnome-paint ?
The one thing I like in MS Paint is the controls to resize the canvas near its edges. Most other programs make you go through a dialog or select and then trim to selection.
I think Chrome apps were deprecated a few weeks/months ago.
You're not missing out on anything by that link being broken.
Edit: seems to be $60 now for "Pro" version, whatever that means, but still cheap. My only wish is svg export¹.
[1] http://www.pixelmator.com/community/viewtopic.php?f=4&t=7663...
Now I simply use Adobe Photoshop even for minor edits (Yes, it's bloated, but can't bring myself to install Flash just for one webapp)
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/
[2] https://paintbrush.sourceforge.io/screenshots/
Works as fast as native paint on my laptop. What browser are you using?
I'm guessing Safari on macOS?
It's completely and utterly indistinguishable from a native app on my PC (Firefox 57.0.4 (64-bit) on Windows 10). First thing I noticed was how smooth and flawless it was, even when I expand the canvas and go crazy with every single tool to make a big mess, it didn't slow down once.
So a 10x bump in resource you say?! -- Hmmm not too shabby for such a faithful clone!
Not really. It has many issues.
The left toolbar is not dockable. I find it annoying that I have to do window management withing a single application.
That and the fact that it asks for the canvas size everytime I launch it.
- A game, Factorio, takes literally 5 minutes for her to get to the main menu. For me it takes about 30 seconds.
- Using `time gimp` and hitting alt+F4 immediately, I get about 2.14 seconds. For my girlfriend this indeed takes a little bit, though not a minute.
- Booting up (from cold) is maybe 20 seconds for me. For her, this takes more than a minute on Ubuntu and more like 2-3 minutes on Windows (it boots in the same time as Ubuntu, but then programs need to load which make it slow for another 1-2 minutes).
Not everything benefits from it, like web browsing or email is not I/O-bound, but lots of things go a lot faster for the investment. Especially for laptops, it's also quieter, supposedly uses a little less power, and won't die as fast from dropping it. I'd highly recommend it.
I'm not putting off your computer as being the blame for GIMP being slow - indeed, it's kinda silly that it takes so long to start, especially the first time - but I just figured you had an HDD and think the vast majority of people will benefit from an SSD. Even my grandma got one a few weeks ago and is super happy with it.
In my experience the Linux version starts up faster than the Windows one.
Indeed. 4-5 secs to open GIMP on Linux here on HDD, and practically instant once cached. Maybe try and start with some command-line options. Useful ones in your case:
-d, —no-data
Do not load patterns, gradients, palettes, or brushes. Often useful in non-interactive situations where startup time is to be minimized.
-f, —no-fonts
Do not load any fonts. No text functionality will be available if this option is used.
-s, —no-splash
Do not show the splash screen.
When I forced to use gimp I simultaneously want to a) kill myself b) kill developers of gimp and their family members.
runs
> I'm sad the one that finally did it chose js.
Just wondering what you think it adds to the discourse.
Recently I've been on OS X a lot, and I wasn't able to find a suitable replacement. Like, nothing even remotely close. Quite a shame. Same story for Linux.
One thing that convinced me to switch was when MS Paint switched to the ribbon interface.
I've never had such a positive introduction to a piece of Software, it works _so well_!
View > Show Markup Toolbar
I have it on IrfanView, but I could not find a simple equivalent on MacOSX.
Thanks!
(I am part of the "read the docs only too late if ever" crew).
Thanks a lot!
$ converge in.png -negate out.png
Visit your favourite website and have a look.
Here's a bunch of new products under 249 GB: https://www.newegg.com/Product/ProductList.aspx?Submit=ENE&I...
note that some of these only have 64 GB.
For these people every bit of storage is useful.
like: http://jspaint.ml/#session:abc sessions are shared in real time
(Rather than adding it after the fact.)
pixelmator for OS X ($60)
pixeluvo for Linux ($35 only) but worth 10X that.
my first go to is pixeluvo since I use linux as my daily machine.
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.
(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.
Are you able to try it in Chromium? I set the property on the canvas to `-moz-crisp-edges` in Nightly and that fixed it.
[0] https://developer.mozilla.org/en-US/docs/Web/CSS/image-rende...
Not knocking it though; it's an impressively close clone.
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.
> Now efforts are going towards making these apps smaller and faster
Yes, I'm hoping those efforts will eventually bear some fruits.
The web will fade away just like Java did.
With the exception of Smalltak, all had native code generation, then Java happened.
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.
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++.
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.
Nowadays, in Node, we don’t even have timezone handling properly built in, or UI frameworks. Or anything.
But when focusing on the PC market, it felt a step backwards being interpreted, the JIT only came in 1.3 and AOT compilation has only been available in commercial JDKs (gjc was never that good).
Let alone the whole story with value types.
Thankfully, I have been able to avoid Node thus far.
Java was pushed just by Sun/Oracle. The web has at least 20 big parties that are promoting it: Google, Mozilla, Amazon, Facebook, Wikipedia, etc.
Cars don't really do much more than they did a century ago. This doesn't mean there haven't been HUGE improvements to make them do their function better.
That's just a function of miniaturizing hardware. Think how much longer your phone's battery would last if not for the software bloat.
> Cars don't really do much more than they did a century ago. This doesn't mean there haven't been HUGE improvements to make them do their function better.
They serve the same fundamental purpose (moving people around), but they are faster, more economical, much more safe, and offer large amount of convenience features. In a way, it's the exact inverse of what's happening with software.
I have two possibly conflicting thoughts about this. (I'm a little bit older, and I feel like this has nothing to do with the web.)
One, everything computer related was much, much slower, and much, much shittier when MS Paint first came out. I feel like software and software standards and hardware and the web, all of it, has improved.
Two, I'm not convinced we'll ever escape shitty software, I think we always have and always will have slow and shitty software, outside the web and inside. We always want the machine to do more than we have a budget for, we always want to write features in less time than we have, we always want cooler features than others, etc., etc. Keeping software fast and good is time consuming, expensive, takes more self control than most have, and often just isn't the highest economic priority. In short, I think there are legitimate reasons we're always sitting at the threshold of pain rather than the threshold of pleasure.
Probably just a vsync "issue" with either the window manager (trade-off between screen tearing and latency) or the browser.
You can use this tool : https://www.vsynctester.com/testing/mouse.html to test your browser.
Interesting read up here : https://www.vsynctester.com/manual.html
It wasn't until I tried editing a 4K wallpaper that it started feeling sluggish, and even then the only lag I got was during the brief period between brushstrokes, where it's trying to save undo history and persist the in-progress image to localstorage.
I do suspect there's probably still a lot of room for optimizing this as well, both on the app's and browser's side of things.
I'm in my early 40s and feel like there are more fast performing GUI apps now than there ever were before. Windows 3 was not fast.
Incidentally, I'm on a beefy machine so JSPaint isn't lagging for me, but it does have a frame rate that makes the paint splatters far apart if you move fast. Is that what's happening to you, or is it actually lagging as in stalling longer than 30ms between splats?
It's been a while so I might be misremembering, but didn't the original MS Paint also do that?
I remember the 90s. A windows upgrade took 2-7 days to complete, a large file could take 10-30 seconds to save, opening and quitting apps was on the order of 10+ seconds optimistically. Everything crashed all the time. This was the default behavior of a brand new $3,000+ machine.
No, thanks. :-P
Try drawing programmatically:
tools[7].paint(ctx, x, y);
$canvas.trigger('change.session-hook');
undoable(function(){
for(var i = 0; i < 1; i += 1/10000){
var angle = i * 500;
var dist = i * 2;
var x = canvas.width * (1/2 + Math.cos(angle) * dist);
var y = canvas.height * (1/2 + Math.sin(angle) * dist);
tools[7].paint(ctx, x, y);
}
});I feel like this mockumentary is not getting enough credit:
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.
[1] https://choosealicense.com/ [2] https://github.com/1j01/jspaint/issues/18
Here I am casually clicking HN posts when suddenly my brain thinks it's the 90s.
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!
I wish more webapps were like this.
I wish computers looked like this again.
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...
He’s got to be the highest profile MS Paint user in the world by now.
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.”
Where is crop? I am not interested in the drawing with a bar of soap aspect. At all.
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.
"That's how Dad did it, that's how America does it, and it's worked out pretty well so far."
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".
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'.
I personally use Figma (http://figma.com) - which is an incredible vector drawing tool!
Then I tried to cut and paste. No go.
Still, very promising!
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.
Also, I get the distinct impression it's less responsive than that computer used to be.
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).
So does MS paint.
Other than that, really nice!
<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>
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)
I've opened an issue for it now here: https://github.com/1j01/jspaint/issues/49