MSPaint in JavaScript | Hacker News Reader

MSPaint in JavaScript

jspaint.app

512 pointswhalesalad125 comments

Photoshop in JavaScript: https://www.photopea.com/

I use it all the time, amazing it was created by a single person!

That is actually super useful. I've already migrated diagrams to draw.io, and now I can do the same for simple photo editing. Super useful for work too, since a webpage is much easier than installing a program.

Nice. Although one of the hidden power of Photoshop is the ability to open ridiculous large image files without any hurdle whatsoever. The other day a client sent a 5GB comp we had to open to modify some text, I was surprised how well Photoshop handled it, on a relatively cheap laptop.

Not sure how it would fair in the browser.

If you don't mind me asking, what's some like meta data you could share on what makes for a 5GB photoshop file? I'm just really curious at how a single photoshop file gets that large. Does it contain a bunch of workflows and auxiliary assets or something?

I’m sure there are many ways, but I’ve done it by stitching together dozens of photos to create a panorama.

That makes sense I need to go look up how big photo files are now I guess.. It has been many years since I used photoshop for editing photos (or at all I suppose); my last camera (excluding my phone) was a Nikon D70 (only 6 megapixels).

I was surprised recently when my GF was uploading photos from our camera to our file server and it's like 50MB per file and that the last few months of photos was like 100GB of data to upload.

It could be a really large render of a `dot` graph. That's the only kind of 5GB PNGs I've had to work with.

While on that topic, anyone have any good ideas in situations like that? Rendering a really large SVG from scratch is not feasible, also most SVG renderers actually fail on really large SVGs in my experience. I've always had to export as PS or just direct render into PNG.

I recently had a graph that dot refused to render to PNG since its maximum buffer was too small. A scaling factor that made it fit also made it unreadable.

We rendered to a 500MB SVG and opened it in Firefox, which worked quite well after the initial load. Bonus: we used the dev tools to navigate the thing.

My wife creates prints for our fabric printer, and the PSD files are often larger than 2GB, containing for example a 55" wide image that is 6+ yards long, at 150-300 dpi with a bunch of layers. Somehow her low-specced 2015 Macbook Pro 13" has handled this type of work just fine, as long as there's enough free space for the scratch disk.

Here's one you can download: https://www.spacetelescope.org/images/heic1502a/

4.3GB Photoshop (PSB) image of the Andromeda galaxy. It's only one layer, but the resolution is 69536 x 22230.

My friend designs mobile apps in Photoshop, when I built him a new computer he opened up a 12gb photoshop file to see how it performed because his old iMac crashed. (it was buttery smooth on the new computer and opened almost instantly)

The canvas size is insane, and has like 100 different views of screens all layered with 100s of folders with 100s of layers.

He used to do 1 photoshop file per screen until he took that idea from someone else.

Im sure he does great work. Just pains me to picture this though, compared to what can be done with Figma or Adobe’s own XD.

Probably would have been a 100-200 meg Fireworks file of Adobe hadn’t killed that.

Photoshop is incredibly wasteful in its resource usage to do UI design in.

(Fireworks had almost the entire feature set of Sketch but 10 years earlier for those that don’t know)

I think about Fireworks all the time. RIP.

It was what I was most scared about dying when Adobe bought Macromedia... and I was right.

Now only if I could get a "Fireworks" clone in JavaScript, ha.

When I was studying I much preferred fireworks. It was awesome.

I asked my friend last night what his largest photoshop file is but he said he no longer uses photoshop for about a year now. Everything is in sketch. And he’s back on an iMac. I’ve never heard of sketch.

Bert Monroy is known for his hyper-photo-realistic style combining Illustrator with Photoshop, and makes extremely high resolution deeply layered images, on the order of 6.52 GB flattened, with 700,000 layers. He's been using Photoshop since before Adobe had it, wrote the first book on Photoshop, and teaches classes about it. His work is on display at the Computer History Museum!

https://en.wikipedia.org/wiki/Bert_Monroy

https://computerhistory.org/profile/bert-monroy/

https://computerhistory.org/blog/my-journey-into-digital-art...

https://www.bertmonroy.com/timessquare/timessquare.html

Times Square

This is the largest image I have ever created, pushing the boundaries of the software and hardware as far as they can go. It was unveiled at the Photo Plus Expo in New York on October 28, 2010 as a work in progress. A 25 foot light box was constructed to display the piece that has been printed on a new material being introduced by Epson.

• The image size is 60 inches by 300 inches.

• The flattened file weighs in at 6.52 Gigabytes.

• It took four years to create.

• The painting is comprised of almost fifteen thousand individual Photoshop and Illustrator files.

• Taking a cumulative total of all the files, the overall image contains over 700,000 layers.

Excerpts from Wide-Format Imaging Magazine

Nov/Dec 2010

...Displayed at this year’s PhotoPlus Expo in NYC, Monroy’s “Times Square” is action-packed with color and detail. People lean forward to study the print’s many stories depicted under the illuminated signs and bright lights of the city’s iconic landmarks. Hundreds of colorful characters can be seen throughout the image in groups, traveling solo, pointing at the sights, dodging yellow taxis, aiming cameras, shaking their fists, chatting amongst each other, dragging luggage, gazing longingly out of windows, and in some cases even thwarting crime.

Printed on Epson’s DisplayTrans Media with the Epson Stylus Pro 11880 printer, Monroy’s masterpiece is the culmination of four years of work. The digital artist created each element using Adobe Photoshop and Adobe Illustrator. He built the 6.52GB image pixel by pixel, using more than 750,000 Photoshop layers. Monroy spent countless hours creating intensely detailed scenes, the likenesses of his family, friends and many luminaries in the imaging industry, and landmarks in and around Times Square.

The image is a “who’s who” in the world of digital imaging, featuring individuals who have made a significant impact in the industry. Adobe Photoshop founders John and Thomas Knoll stand in the main foreground, surrounded by digital imaging experts such as Russell Brown and Jeff Schewe. An assortment of photographers includes John Paul Caponigro, Greg Gorman, Jay Maisel and Jack Reznicki, each telling their own story. Monroy even included a cameo of his younger self, looking out from the window of a yellow taxicab, reliving a brief stint as a New York taxi driver.

A defining moment in his quest for new digital art techniques was seeing “Times Square” printed for the first time with Epson’s new backlit material designed for ink jet printing. “I was halfway into the Times Square project when I heard Epson was developing DisplayTrans Backlight Media for creating backlit signage to be used in a lightbox,” said Monroy.

The opaque, polyester film has an opacifying layer that diffuses light throughout the printed image so it is evenly lit. "That extraordinary final print of 'Times Square' on DisplayTrans Media with the Epson 118000 printer was exactly the way I'd envisioned the result. The colors are beautiful and vibrant, the blacks are rich and dark, and the flesh tones are warm and natural," said Monroy...

Well, for start, you would need to upload 5GB. Not sure how much time it would take you given that usually normal US consumer has a crap connection when it comes to it.

Always amazed how in Earth USA is still 1st economy with all the crap Verizon/Comcast & Co do to average US citizen.

It's JavaScript. It runs on the client side.

The script do run on the client side, but it can't access images from your computer, so you will have to upload it first so it can access it from the server.

It may be possible via the FileReader API

Yeah, but you don't upload it - you just make it accessible to the browser. So you read it into memory, but you would do the same with a "native" program (despite the fact that a very large file might be read more intelligently if it doesn't fit into RAM).

Couldn't you upload the file to a blob, keeping it client side?

Re: MarcellusDrum

lol, so much so, I create games in javascript so I only need a static server.

Oh my god that's literally insane. Sorry, but I am astonished by what it implements.

Layers? Path editing? Blending options? Content-aware fill? Convert text to shape? In a web browser?

I'm just blown away right now. I'm editing a 2000x3000 pixel image and it seems just as fast as my copy of actual Photoshop.

I can't even fathom how much work this must have been. One person? How is that even possible?

He did a few AMAs on Reddit:

https://www.reddit.com/r/IAmA/comments/c8ru2y/i_made_a_free_...

https://www.reddit.com/r/IAmA/comments/9urjmg/i_made_a_free_...

I find this fact mind blowing:

Right now, Photopea is about 1.4 MB (most of it is zipped javascript).

880 kB is the actual program

150 kB are localizations to 38 languages, with 650 phrases in every language

116 kB is a database of gradients, brushes, patterns and contours

84 kB are icons (112 of them, in a 160x160 px resolution)

23 kB is a font database (names, categories and URLs for 4700 TTF files)

i hope he's getting payed

From one of the comments:

"With ads, you can make between 2 to 6 USD per 1000 visits on your webpage. So with 3 millions of visits, I can make between 6 to 18 000 USD a month, it depends on a month and an ad provider (I have been testing several of them lately)."

And some people say 10x programmers don't exist.

forget 10 , this is some 100x type shit

It also shows how much an individual can achieve without big corporate and nowadays "agile" bullshit overhead.

So true!

Woah and it works from a mobile browser too! Albeit the ui is a bit clunky on mobile - but it's running!

I wonder what are the specs of your machine and how much % RAM and CPU usage is absorbing

Photoshop is very limited by single core anyway due to so much of it being so old and still prefers to page to disk current version refuses to open at all with less than 10 gig free, not sure what feature they added that justifies this because it didn’t use to be the case.

You just take it for granted till you see After Effects blow it out of the water and not demand that much.

Apps for doing graphic work should be maxing out your machines power, that’s what it’s there for. When my rendering engine uses 100% of my two gpus it doesn’t feel sluggish it feels fast.

Easy to tell when Photoshop is sluggish on my MacBook air but Affinity Photo is as smooth as one wants it to be when just scrolling an image but the PSD format dominance is just killing the market competition when you're being sent a PSD file.

Huge work! That's awesome! The power of photoshop for Linux. No install. Supra fast! Wow!

BTW they made a very fast inflate lib which I repackaged (with permission) into an unzip library that AFAIK is 6 to 25x faster the most popular unzip library.

https://www.npmjs.com/package/unzipit

That speed mostly comes from their library.

Have not gotten around the making a corresponding zip library.

I had originally assumed this was some sort of webassembly port of the actual Microsoft Paint source code. But it looks like a completely custom JavaScript app built from the ground up to look and work very similarly to Microsoft Paint. That’s actually super impressive, although not quite the technological feat I had originally assumed. It does make this more dubious from a trademark perspective, the author might want to make it more clear it’s not actually Microsoft Paint.

It would be hard to beat Fabrice Bellard in this game:

https://bellard.org/jslinux/

Oh wow this is amazing. The win2k image runs Paint, and looks like you can upload and download images.

There's more where that came from - check out this guy's other work.

I wonder about copyright issues though. Is Win2K now in the public domain?

Fascinating, so what happen when you load the same URL inside IE inside win2k? I wonder how many times it can recursively be loaded without the parent browser freezing.

Someone did port Windows 95 to JS using Dosbox. https://win95.ajf.me/

Respectfully, that's not really a port.

They even replicated the 10x zoom easter egg (draw something and click the line below 8x zoom).

This is totally something that I could live with being an Electron app on Linux.

Yes, I should be using GIMP/Krita/Other community FOSS solution, but gosh darnit, sometimes I just wanna make a 20-second markup on a screenshot, and I wanna use the friggin' program that I have a 20-year muscle memory for!

My preferred mspaint workflow:

1. Screenshot thing with screenshot rectangle selector (Win+S on OneNote 2013)

2. Draw red circles and arrows all over it

3. Repeat #1 on mspaint canvas

4. Paste screenshot with annotations to whatever I need pasting it to.

I would suggest giving lightshot a try. It does what ask for and saves you time to open paint

Specifically for screenshot markup, I recommend using flameshot (https://flameshot.js.org/#/). It allows you to markup the screenshot right as you take it.

Flameshot is sluggish and bloated. If you want the same functionality and more, but fast, try Shutter.

Do either of those work under Wayland? Or only X11?

Not sure tbh. I use it with latest Fedora+MATE at work.

Shutter is fast now? Awesome. I remember when I had to stop using it for a while because it was somehow really unresponsive.

It is compared with flameshot...

Greenshot is my weapon of choice for that. Hit Print Screen, drag a box of what you want to capture, open in editor and annotate away

https://getgreenshot.org/

The parent comment was asking about Linux, which isn't support by Greenshot it seems.

Kolourpaint is a pretty decent linux-based alternative to MSPaint. Same simple featureset and straightforward UI, with the nice added touch of support for transparency.

MS Paint itself can run in Wine. I believe you can install it with winetricks.

This app has really noticeable and irritating latency vs. native paint that would make it a pain for me to actually use.

If we are being honest that's probably an implementation thing, and not just a function of it being JS, but once gain performance problems in a JS app damage the experience for me.

Not on my $300 iPad

The fact that at least 5 people have replied with different tools really just emphasizes your point.

Is it a perfect recreation? Of course not.

Will it do every sort of image editing I might want? A definite no.

Does everybody either quickly learn it or already have its interface burned into their memory? Yep.

Does it work well enough to do a quick edit on pretty much any OS (including mobile) without needing anything but a browser and an easy-to-remember link? YES.

I try not to begrudge them because they're just trying to be helpful. :)

Shortcut to the Electron app: https://github.com/1j01/jspaint#desktop-app-electron

What would bundling this as an Electron app provide that just bookmarking the site wouldn't?

The whole thing probably takes less than a couple of megabytes.

This is huge. I no longer have any reason to keep my Windows partition!

Windows XP? :P

Ah, this could be used as the missing paint in macOS. Even taking a screenshot and dragging it inside the browser works as expected. Is there an easy wat to turn this into an app that can live locally?

Paint is the only thing I miss about Windows.

Presumably Electron, but it may be slightly more comfortable to compile something like KolourPaint for macOS instead.

There's something special about MS Paint. It feels so natural to use it, the way it works makes sense.

These similar products feel works for some reason.

On macOS and Linux, we lack the basic graphics editor.

Have you tried Kolourpaint? It is pretty similar to MS Paint.

No, I have not. It looks promising but I suspect that there are some poor defaults in the tools leading to bad results aesthetically. Looked at some usage videos and there were some very ugly rectangle corners.

See, for the tools in MS Paint are very basic and have very nice defaults so it usually yields non-disturbing results. Good defaults are important.

You don't need to compile it, there is already a precompiled version for macOS: https://binary-factory.kde.org/job/Kolourpaint_Nightly_macos...

Ah, that’s cool, I didn’t know. Seems like a winning solution to me.

Download and unzip NW.js, create a file called package.json with the following text:

  { "name": "JSPaint", "main": "https://jspaint.app/" }

Place it in the extracted folder, then start nw.

I've not used NW.js before but I'm guessing that won't work offline?

It works if the page is a PWA with offline support. But no, JSPaint doesn't seem to be one :/

You could probably use a local caching proxy if your love for MSPaint is true and pure.

The author has started work on locally running Electron App [0]

[0] - https://github.com/1j01/jspaint#desktop-app

~100 Mb to wrap less than two Mb of code in a browser runtime... to ship an application that already runs in a browser.

To make a "native" version of an app orders of magnitude larger than the original, because no one bothers to make actual native apps anymore.

This is not the best possible timeline.

There’s an app called Fluid which allows you to run websites as thin Mac apps. It uses Safari instead of Electron so it’s not incredibly bloated.

https://fluidapp.com/

Are there not image manipulation programs on macOS to your liking?

The advanced once are phenomenal but when I need something very simple Preview or Markup doesn't cut it and the advanced ones are overkill.

For example, I want to create a very basic image where I would use other images and screenshots and I would cover something to hide, resize some of the images I use and put a few words of text to indicate something.

This is so very easy in MS Paint. The app will open in 0.1s, you will configure the size of your canvas by dragging the dot in the corner, copy-paste your images and drag and resize them by moving the dots then you can select and delete the parts you don't want and when you are happy with your arrangements you will use the rectangle drawing tool to cover some places and the text to mark the places you want to mark. Everything is fast, you don't have to think about layers, masks, vectors or anything like that and the app is very responsive.

Preview has some tools but they are cumbersome to use and there's no way to bring in other images.

Pixelmator’s alright

I second this. I use Pixelmator (Pro) for image manipulation on macOS. I prefer applications which are cross-platform and are "easy to learn, difficult to master" (MS Paint and MS Office come to mind) while still adhering to DE/WM (in macOS case, Aqua) UI. With regards to image manipulation I don't know of any. Perhaps Krita.

You can bring in other images into Preview by pasting

Normal MS Paint runs fine in Wine, I know somebody who uses it regularly.

You might be interested in Paintbrush [0]. It's a free open source native app that's extremely close to MS Paint in functionality.

[0] - https://paintbrush.sourceforge.io

I used that for a bit, but it's a bit buggy and hasn't been updated since 2010

Threads from 2018:

https://news.ycombinator.com/item?id=16174478

https://news.ycombinator.com/item?id=17275332

An almost unrelated but great thread from 2011: https://news.ycombinator.com/item?id=2305370

Get the real magic* with Konami mode:

up, up, down, down, left, right, left, right, b, a

* Magic being what I'd call a full 90s experience

Looks like this is part of a greater project, 98.js.org. Though, you could also add it as a shortcut to Windows 93[1] and it'd fit right in.

[1]: https://www.windows93.net/

The source code/project page is linked in the Help popup.

https://github.com/1j01/jspaint

Maybe this is false memory, but did old MSPaint have a "feature" where if you are holding down the left click button to draw with the pencil tool or something, and then you scroll the scroll-wheel, it creates a bunch of vertical lines along where you are drawing? I was sad that this didn't have that.

Fun but not really useful. I bloody wish someone would implement Paint.Net (which is the most practical + intuitive picture editor ever IMHO) in JavaScript. It's cross-platform Mono clone, Pinta, is tolerable but not nearly as good.

Even the speed by which help articles load when clicked on in the Help Topics works the same way as ms paint. This is insane level of attention to details.

On a separate note, I love the Help Topics so much I think I will use it instead of ZenDesk guide pages on our SaaS website. It's so elegant and all contained in one booklet with extremely legible text and iconography. No bs web ui here.

> No bs web ui here.

You ain't seen nothing yet: https://dev.lotw.xyz/desk.os

Works surprisingly well on iOS, although it’s difficult to select the menu items (small tap target), there doesn’t appear to be any way to right click, and the window size bleeds off the right edge of the screen. Still, much more impressive functionality and performance than I expected, especially since this doesn’t seem to be optimized for mobile!

The history to GIF is a neat feature but falls apart if your first operation is to invert colors or fill the image as black instead of default white. Having the ability to edit history would be nice (cut out the initial New Document history item) or be able to create a new image from the current one with history erased.

My favorite feature is that typing `cmd-[` (browser back) briefly rotates the canvas before the browser navigates back.

Oh wow, there's a lot of attention to detail. The application menu looks perfect and is a lot snappier than I thought it would be for an HTML5 app.

On the other hand-- why do the toolbar buttons only trigger on mouseup? I thought they triggered on mousedown on the original MS Paint.

I'd forgotten how much better the old Paint UI was compared to the newer edition...

Konami code is in effect ;)

what strikes me the most is that the "modern" theme (from the "extras" menu) feels so much less user friendly than the "classic" one. where did it all go wrong?..

This is awesome! I miss MS Paint. So much easier for markup.

One nit though, they should add a few sleep() in there so it feels like my old PC. :)

Here a JS/canvas implementatio n from 2010 (he showed a demo at a code meetup around 2006?) https://sigilmaster.com/ (desktop) by C3O (now works at the european parlament for the pirate party to my latest knowledge)

would be fun to compare the code

Not seeing the Windows 9x theme around the window puts this squarely in uncanny valley for me. (Granted, I'm running this in Chrome on Linux -- if one was on Windows, the "double frame" would probably look wrong, too.)

Reminds me of the "Mac OS 8 in DHTML" page from the 90s...

This is nice. The Win95-Vista paint interface was IMO the best and i still dislike using the newer versions, especially since they screw up a lot of common things (e.g. try to draw overlapping rectangles).

You are using the wrong algorithm for filled circles. IIRC MS Paint uses an algorithm based on the mathematical formula for a circle, which creates a pointy out pixel which looks a bit out of place.

MacPaint in JavaScript: https://www.cloudpaint.com/classic

An elegant weapon, from a more civilized time.

Oh man, if this had some WebRTC in there so we could all paint on one canvas that would be awesome.

Love it any how!

Edit: Just noticed under Extras there is Multi-user. Bravo!

Is there a Deluxe Paint Javascript version?

It doesn't save in BMP format?

I can't believe that this application has an Online Help ... book as well. ;)

I love the fact that even the retro Help application look and feel was recreated.

In MS Edge, click on "Install this site as an app" in the Apps menu.

:mind blown:

grumbling to myself "If i could go back in time. this is the covered wagon. this is why cowboys get old."

I love this so much

Upload to imgur? This is a meme machine!

render history as a gif is quite cool.

So sick. Did you make this yourself?

That's insane! (in a good way)

this is great! thanks for making this, brought me back to my childhood and made my day!

Why do people do that...

haha cool the konami-code easter egg

Someone's been on reddit today.

Reply on news.ycombinator.com