Microsoft Paint has been revived for the web, and what is better than that? It can be used from your browser, from any operative system, from any device (yeah, support for touch devices) and almost with all the capabilities of the old school application. Do you remember that phase of your life when everything was easy as a kid, where you learned how to use a computer? Maybe for the people that was born before 1990 the life was already hard, but whatever. We only want to highlight that the the old school paint was an important part of the childhood of many people (like me, in those boring informatics class where you only learned what a Mouse and a CPU is, during 4 years ...) and important things in life, deserve to be remembered. Today we want to share with you an awesome project that implements an almost 100% functional MS Paint clone built with web technologies.
- Cross-platform
- Unlimited undos/redos (as opposed to a measly 3 in Windows XP, or a measly 50 in Windows 7)
- Autosaves if you allow local storage. (Try refreshing the page to make sure this works, and to check it out)
- Edit transparent images! To create a transparent image, go to Image > Attributes... and select Transparent, then Okay, and then Image > Clear Image or use the Eraser tool. Images with any transparent pixels will open in Transparent mode.
- Go to View > Extras Menu to enable access to additional features not available in MS Paint
- Switch themes from the Extras menu
- Create an animated GIF from the current document history. Accessible from the Extras menu or with Ctrl+Shift+G. It's pretty nifty, you should try it out! You might want to limit the size of the image though.
- When you do Edit > Paste From... you can select transparent images and GIFs.
You can even paste a transparent animated GIF and then hold Shift while dragging the selection to smear it across the canvas while it animates!Update: This was due to not-to-spec behavior in Chrome. I may reimplement this in the future as I really liked this feature. - You can open SVG files (because browsers support SVG). It's still a completely raster image editor though.
- You can crop the image by making a selection while holding Ctrl
- Keyboard shortcuts for rotation: Ctrl+. and Ctrl+, (</>)
- Rotate by any arbitrary angle in Image > Flip/Rotate
- In Image > Stretch/Skew, you can stretch more than 500% at once
- Rudimentary multi-user support. Start up a session at jspaint.ml/#session:multi-user-test and send the link to your friends! It isn't seamless; actions by other users interrupt what you're doing, and visa versa. Sessions are not private, and you may lose your work at any time. If you want better collaboration support, follow the development of Mopaint.
- Load many different palette formats with Colors > Get Colors. (I made a library for this.)
- Mobile support
- Click/tap the selected colors area to swap the foreground and background colors
There are as well known features that don't work/partially like:
- Transparent PNGs - Done! Images that are partially transparent will automatically open in Transparent mode. To enable transparency for an image, go to Image > Attributes or press Ctrl+E, select Transparent, and hit Okay. Then you'll want to remove some of the background. You can use the Eraser tool a bit, then use the Color Picker to pick up where you erased and then use the Fill tool to remove bigger areas.
- Animated GIFs (yes, that entails a fully featured (but simple) animation editor). - Currently you can only make GIFs of the document history, with Ctrl+Shift+G or from the Extras menu.
- Animated Transparent APNGs (better than GIFs, but with less support)
- Multi-size Icons (ICO for windows and ICNS for mac)
- Scalable Vector Graphics (kidding) - Actually, it could always open SVG files in browsers that can handle SVGs, and I've made it try not to save over the original SVG. That's pretty decent SVG support for a 100% raster image editor.
However, the project still being pretty mature and can be used yet:
Test it by yourself (and maybe work on it as well?)
The project is open source and you can find the code on the official repository at Github here., or if you just want to test it online, check the official website here. The project by itself is made to work as an optimized progressive web app, uses HTML,CSS and VanillaJS to bring you back those old good memories. If you are feeling nostalgic as us, please share the project with your friend and let them known about this jewel.
