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)),
|
|
|
|
improve on it, and to extend 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
|
|
|
|
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)
|
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
|
|
|
|
<kbd>Ctrl+Shift+G</kbd> (pretty nifty, you should try it out)
|
2014-05-30 07:00:01 +00:00
|
|
|
* Cross-platform, I guess
|
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.
|
|
|
|
You can even paste a transparent animated GIF and then
|
|
|
|
hold <kbd>Shift</kbd> while dragging the selection to
|
|
|
|
smear it across the canvas *while it animates*!
|
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>
|
|
|
|
* Rudimentary **multiplayer** support:
|
|
|
|
Start up a session at
|
|
|
|
[jspaint.ml/#session:bad455](http://1j01.github.io/jspaint/#session:bad455)
|
|
|
|
and send the link to your friends!
|
2014-10-28 23:09:27 +00:00
|
|
|
(It doesn't work very well yet, though.
|
2014-10-25 18:15:39 +00:00
|
|
|
Currently when someone changes the canvas, you're annoyingly 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)
|
2014-10-24 00:54:05 +00:00
|
|
|
* Rotate image by arbitrary angle
|
2014-10-28 23:09:27 +00:00
|
|
|
* Keyboard shortcuts for rotation
|
|
|
|
* Alternate themes (You can already style it with browser extensions like Stylebot or Stylish)
|
2014-11-19 20:25:33 +00:00
|
|
|
* Noncontiguous fill (Probably by holding <kbd>Shift</kbd> and 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-27 03:54:50 +00:00
|
|
|
* Non-silly magnification
|
2014-10-24 00:54:05 +00:00
|
|
|
* Shape styles on most of the shape tools
|
2014-10-28 23:09:27 +00:00
|
|
|
* The polygon tool is pretty bad
|
|
|
|
* Menu items don't get enabled/disabled dynamically
|
|
|
|
* [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.
|
2014-10-28 23:09:27 +00:00
|
|
|
The clipboard-related menu items can't access the clipboard
|
2014-11-25 05:39:16 +00:00
|
|
|
because it would be a huge security issue if browsers let web pages access the clipboard at will.
|
2014-10-25 18:15:39 +00:00
|
|
|
To use the clipboard menu items, you need to install the Chrome app.
|
2014-10-24 01:34:27 +00:00
|
|
|
The menu items will still be grayed out, though.
|
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!
|
|
|
|
* Animated [GIFs][GIF]
|
|
|
|
(yes, that entails a fully featured (but simple) animation editor) -
|
|
|
|
You can currently only make GIFs of the document history with <kbd>Ctrl+Shift+G</kbd>
|
|
|
|
* 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.
|
|
|
|
You can even drag them into a little window.
|
|
|
|
You can dock the window back to the side by double-clicking on it's titlebar.
|
|
|
|
|
|
|
|
* 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-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!)
|
2014-10-24 00:54:05 +00:00
|
|
|
* [ ] Scroll Wheel Bug (Hmm, let's maybe not recreate this? Ah who am I kidding I'll make it an option)
|
|
|
|
|