2014-05-30 07:00:01 +00:00
2014-09-22 11:16:04 +00:00
# [![](images/icons/32.png) JS Paint](http://1j01.github.io/jspaint/)
2014-09-22 10:13:18 +00:00
2014-09-29 01:19:48 +00:00
A nice web-based MS Paint remake and more...
[Try it out! ](http://1j01.github.io/jspaint/ )
2014-05-30 07:00:01 +00:00
2014-10-24 01:34:27 +00:00
The goal is to remake MS Paint
(including its [little-known features ](#did-you-know )),
2015-02-24 00:39:43 +00:00
improve on it, and to [extend ](#extended-editing ) the types of images it can edit.
2014-10-28 23:09:27 +00:00
So far, it does this pretty well.
2014-10-24 01:34:27 +00:00
You can also install it as a Chrome app.
2014-05-30 07:00:01 +00:00
2015-02-24 00:39:43 +00:00
![Screenshot ](http://isaiahodhner.ml/images/projects/jspaint.png )
2014-08-10 03:06:33 +00:00
2014-09-29 01:19:48 +00:00
#### Current improvements include:
2014-10-28 23:09:27 +00:00
* Unlimited undos/redos (as opposed to a measly 3 in Windows XP,
or a somewhat less measly but still annoying 50 in Windows 7)
2015-06-15 23:50:31 +00:00
* Automatically saves if local storage is allowed
(Try refreshing the page to make sure, and to check it out)
2014-10-24 01:34:27 +00:00
* Edit transparent images! To create a transparent image,
go to Image > Attributes... and select Transparent,
then Okay, and then Image > Clear Image
* Create an animated GIF from the current document history with
2015-02-13 04:34:26 +00:00
< kbd > Ctrl+Shift+G</ kbd > (pretty nifty, you should try it out (after editing *a fairly small image* ))
2015-06-15 23:50:31 +00:00
* Cross-platform, I suppose
2014-09-02 23:02:38 +00:00
* You can shoot at it [Asteroids style ](http://kickassapp.com/ )
2014-10-24 01:34:27 +00:00
* When you do Edit > Paste From... you can select transparent images and animated GIFs.
2015-02-24 00:39:43 +00:00
~~You can even paste a transparent animated GIF and then
2014-10-24 01:34:27 +00:00
hold < kbd > Shift< / kbd > while dragging the selection to
2015-02-24 00:39:43 +00:00
smear it across the canvas *while it animates* !~~
Update: This was due to not-to-spec behavior in Chrome.
[See this blog post. ](http://christianheilmann.com/2014/04/16/browser-inconsistencies-animated-gif-and-drawimage/ )
I may reimplement this in the future as I really liked this feature.
2014-09-22 10:13:18 +00:00
* It can open SVG files (by accident)
2014-10-24 01:34:27 +00:00
* You can crop the image by making a selection while holding < kbd > Ctrl</ kbd >
2014-12-08 02:45:23 +00:00
* Keyboard shortcuts for rotation: < kbd > Ctrl+.</ kbd > and < kbd > Ctrl+,</ kbd > (< kbd > < </ kbd > /< kbd > ></ kbd > )
2015-02-13 04:34:26 +00:00
* Rotate image by arbitrary angle! Available in Image > Flip/Rotate
2014-10-24 01:34:27 +00:00
* Rudimentary **multiplayer** support:
Start up a session at
2015-02-23 21:16:21 +00:00
[jspaint.ml/#session:multiplayer-test ](http://1j01.github.io/jspaint/#session:multiplayer-test )
2014-10-24 01:34:27 +00:00
and send the link to your friends!
2014-12-09 02:43:21 +00:00
It isn't perfectly seamless, and you may lose your drawing or be interrupted.
2014-10-24 01:34:27 +00:00
2014-05-30 07:00:01 +00:00
2014-09-29 01:19:48 +00:00
#### Possible improvements include:
2014-08-18 20:56:16 +00:00
* [Extended Editing ](#extended-editing )
* Mobile support
2014-09-29 21:12:32 +00:00
* Proportionally resize the selection or canvas by holding < kbd > Shift</ kbd >
2014-09-23 02:10:11 +00:00
* After adding text, save as SVG or HTML with selectable text
* < kbd > Alt</ kbd > as a shortcut for the eyedropper, as long as it doesn't conflict with keyboard navigation of menus
2014-09-22 10:13:18 +00:00
* Loading palettes (I've started a [project ](https://github.com/1j01/palette.js/ ) for this)
2015-02-13 04:34:26 +00:00
* Alternate themes (You can already style it with browser extensions like Stylebot or Stylish though!)
* Noncontiguous fill (Probably by holding < kbd > Shift</ kbd > when using the fill tool)
2014-11-27 16:27:58 +00:00
* Optionally treat almost-equal colors as equal
2014-09-22 10:13:18 +00:00
2014-10-24 01:34:27 +00:00
2014-10-01 20:51:25 +00:00
#### A lot of stuff isn't done yet:
2014-09-22 10:13:18 +00:00
2014-11-28 02:53:34 +00:00
* The Magnifier's viewport preview
2014-10-24 00:54:05 +00:00
* Shape styles on most of the shape tools
2014-12-07 06:42:26 +00:00
* The polygon tool needs some work
2015-02-24 00:39:43 +00:00
* Keyboard support in the menus and dialogues
2014-10-28 23:09:27 +00:00
* [This entire document full of things to do ](TODO.md )
2014-09-22 10:13:18 +00:00
2014-10-24 01:34:27 +00:00
Clipboard support is somewhat limited.
2014-10-02 20:41:43 +00:00
You can copy with < kbd > Ctrl+C< / kbd > , cut with < kbd > Ctrl+X< / kbd > , and paste with < kbd > Ctrl+V< / kbd > ,
2014-11-25 05:39:16 +00:00
but data copied from JS Paint can only be pasted into other instances of JS Paint.
2015-02-24 00:39:43 +00:00
There's apparently no way for web apps to properly copy image data to the clipboard.
2014-10-25 18:15:39 +00:00
To use the clipboard menu items, you need to install the Chrome app.
2014-12-07 06:42:26 +00:00
(It would be a huge security issue if browsers let web pages access the clipboard at will.)
2014-08-18 20:56:16 +00:00
2014-05-30 07:00:01 +00:00
## Staying True to the Original
2014-11-25 05:39:16 +00:00
Ah yes, good old paint. Not the one with the
[ribbons ](https://www.google.com/search?tbm=isch&q=ms+paint+windows+7+ribbons )
2014-08-10 03:06:33 +00:00
or the [new one ](https://www.google.com/search?q=freshpaint&tbm=isch )
with the interface that can take up nearly half the screen.
2014-05-30 07:00:01 +00:00
Windows 95, 98, and XP were the golden years of paint.
2014-08-10 03:06:33 +00:00
You had a tool box and a color box, a foreground color and a background color,
2014-09-20 17:37:12 +00:00
and that was all you needed.
2014-05-30 07:00:01 +00:00
Things were simple.
2014-08-10 03:06:33 +00:00
But now we want transparency.
And we want to undo more than three actions.
2014-09-20 17:37:12 +00:00
We can't just keep using the old paint.
2014-05-30 07:00:01 +00:00
2014-10-28 23:09:27 +00:00
So that's why I'm making JS Paint. I want to bring good old paint into the modern era.
2014-09-02 23:02:38 +00:00
Also, it's totally retro. There might be themes later, though.
2014-10-28 23:09:27 +00:00
What was this section titled? Oh, um yeah I'm doing that too, I guess.
2014-05-30 07:00:01 +00:00
2014-09-22 10:13:18 +00:00
2014-05-30 07:00:01 +00:00
## Extended Editing
2014-10-28 23:09:27 +00:00
I want to make JS Paint to be able to edit...
2014-08-10 03:06:33 +00:00
2014-11-25 05:39:16 +00:00
* Transparent [PNGs][PNG] - Done!
2015-02-24 00:39:43 +00:00
Images that are partially transparent will automatically open in Transparent mode.
Otherwise they will open in Opaque mode.
2015-02-13 04:34:26 +00:00
Enable transparency for an image by going to Image > Attributes or pressing < kbd > Ctrl+E< / kbd >
and selecting Transparent. (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
2015-02-24 00:39:43 +00:00
pick up where you erased and then use the Fill tool to remove bigger areas.
2014-11-25 05:39:16 +00:00
* Animated [GIFs][GIF]
(yes, that entails a fully featured (but simple) animation editor) -
2015-02-13 04:34:26 +00:00
Currently you can only make GIFs of the document history with < kbd > Ctrl+Shift+G< / kbd >
2014-11-25 05:39:16 +00:00
* Animated Transparent [APNGs][APNG]
(better than GIFs, but with less support)
* Multi-size Icons ([ICO][ICO] for windows and [ICNS][ICNS] for mac)
* [Scalable Vector Graphics][SVG] (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.
* [Text Files][TXT] (definitely just kidding maybe)
[PNG]: http://en.wikipedia.org/wiki/Portable_Network_Graphics "Microsoft Icon Image format"
[GIF]: http://en.wikipedia.org/wiki/Graphics_Interchange_Format "Graphics Interchange Format"
[APNG]: http://en.wikipedia.org/wiki/APNG "Animated Portable Network Graphics"
[ICO]: http://en.wikipedia.org/wiki/ICO_(file_format) "Microsoft Icon Image format"
[ICNS]: http://en.wikipedia.org/wiki/Apple_Icon_Image_format "Apple Icon Image format"
[SVG]: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics "Scalable Vector Graphics"
[TXT]: http://en.wikipedia.org/wiki/Text_file "Text file"
2014-05-30 07:00:01 +00:00
2014-09-22 10:13:18 +00:00
2014-05-30 07:00:01 +00:00
## Did you know?
2014-08-10 03:06:33 +00:00
2014-10-28 23:09:27 +00:00
* You can drag the color box and tool box around if you grab them by the right place.
2015-02-24 00:39:43 +00:00
You can even drag them out into little windows.
You can dock the windows back to the side by double-clicking on their titlebars.
2014-10-28 23:09:27 +00:00
* In addition to the left-click foreground color and the right-click background color,
there's also a third color you can access by holding < kbd > Ctrl< / kbd > while you draw.
It starts out with no color so you'll need to hold < kbd > Ctrl< / kbd > and select a color first.
The slightly fancy thing about this color is you can
press and release < kbd > Ctrl< / kbd > to switch colors while drawing.
2014-12-08 02:45:23 +00:00
* You can apply image transformations like Flip/Rotate, Stretch/Skew or Invert (in the Image menu) either to the whole image or to a selection. If you make a selection with the Select or Free-Form Select tool, the transformations apply to the selection.
2014-09-29 01:19:48 +00:00
* These Tips and Tricks from [a tutorial for MS Paint ](http://www.albinoblacksheep.com/tutorial/mspaint )
also work in JS Paint if they have a checkmark:
2014-02-07 02:47:16 +00:00
2014-09-22 10:13:18 +00:00
* [x] Brush Scaling (< kbd > +</ kbd > & < kbd > -</ kbd > on the Numpad to adjust brush size)
* [x] "Custom Brushes" (hold < kbd > Shift</ kbd > and drag the selection to smear it)
* [x] The 'Stamp' "Tool" (hold < kbd > Shift</ kbd > and click the selection to stamp it)
* [x] Image Scaling (< kbd > +</ kbd > & < kbd > -</ kbd > on the Numpad to scale the selection by factors of 2)
2014-10-01 20:51:25 +00:00
* [x] Color Replacement (right mouse button in Eraser selectively replaces the foreground color with the background color)
2014-09-22 10:13:18 +00:00
* [ ] The Grid (< kbd > Ctrl+G</ kbd > & Zoom to 6x+)
* [x] Quick Undo (Pressing a second mouse button cancels the action you were performing. I also made it redoable, in case you do it by accident!)
2015-06-15 23:50:31 +00:00
* [ ] Scroll Wheel Bug (Hmm, let's maybe not recreate this?)
2014-10-24 00:54:05 +00:00