JS Paint

Open-source, web-based MS Paint clone.

See also 98.js, which includes JS Paint as part of it.

(jspaint.app) Paint   website

ROAM_REFS: https://jspaint.app/#local:a5c130427e4df8

(jspaint.app) JS Paint — MS Paint online   website

ROAM_REFS: https://jspaint.app/about.html

JS Paint is a pixel-perfect remake of Microsoft Paint that runs in the browser.

Open source under the permissive MIT License.

Request features and report bugs on GitHub or by email.

THIS SITE IS…

Try me!

Read about the project and extra features on the readme.

Support the project at paypal.me/IsaiahOdhner.

(github.com) 1j01/jspaint: 🎨 Classic MS Paint, REVIVED + ✨Extras   website

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

A pixel-perfect web-based MS Paint remake and more… Try it out! Then join the Discord server to share your art!

JS Paint recreates every tool and menu of MS Paint, and even little-known features, to a high degree of fidelity.

It supports themes, additional file types, and accessibility features like a Dwell Clicker and Speech Recognition.

main-screenshot.png

Ah yes, good old Paint. Not the one with the ribbons or the new skeuomorphic one with the interface that can take up nearly half the screen. (And not the even newer Paint 3D.)

Windows 95, 98, and XP were the golden years of Paint. You had a tool box and a color box, a foreground color and a background color, and that was all you needed.

Things were simple.

But we want to undo more than three actions. We want to edit transparent images. We can't just keep using the old Paint.

So that's why I'm making JS Paint. I want to bring good old Paint into the modern era.

** Current improvements include:

  • Open source (MIT licensed)
  • Cross-platform
  • Mobile friendly
    • Touch support: use two fingers to pan the view, and pinch to zoom
    • Click/tap the selected colors area to swap the foreground and background colors
    • View > Fullscreen to toggle fullscreen mode, nice for small screens
    • Extras > Quick Undo Button to add a floating undo button for easier access
      • (this may be enabled by default in the future for touch devices)
  • Web features
    • File > Load From URL… to open an image from the Web.
    • File > Upload to Imgur to upload the current image to Imgur.
    • Paste supports loading from URLs.
    • You can create links that will open an image from the Web in JS Paint. For example, this link will start with an isometric grid as a template: zJMrWwb.png
    • Rudimentary multi-user collaboration support. Start up a session at jspaint.app/#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.
  • Extras > Themes to change the look of the app.
    • Dark and light variants
    • Vector tool icons handcrafted to match the pixel art versions, for both Modern and Classic themes
    • Occult theme, in the spirit of Halloween
    • Winter theme, with a special color palette including candy cane stripes, and advent calendar style flaps revealing pixel art for each tool
    • Bubblegum theme, featuring Business Pink color scheme and AI-generated icons
  • Extras > Enlarge UI to make buttons and menus bigger, for usage with an eye tracker, head tracker, or other course input devices. May also work well for a tablet, but not so much for a phone at the moment.
  • Extras > Dwell Clicker to click automatically by hovering in one spot, for usage with an eye tracker or head tracker.
    • Hovered buttons are highlighted, and the click is performed after a delay.
    • Supports dragging windows and drawing on the canvas.
    • With just a webcam, you can try it out with Enable Viacam (head tracker), GazePointer (eye tracker), or the built in Tracky Mouse head tracker using Extras > Head Tracker.
    • This feature can be easily added to other web applications, using the Tracky Mouse API.
  • Extras > Speech Recognition to control the app with your voice.
    • Select tools and colors ("fill tool", "orange", etc.)
    • Pan the view ("scroll down and to the left", or "go southwest", etc.)
    • Explore the menus, or activate any menu item without opening the menus first
    • Interact with windows
    • Dictate text with the Text tool
  • 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.
  • Load and save many different palette formats with Colors > Get Colors and Colors > Save Colors. (I made a library for this: AnyPalette.js.)
    • You can also drag and drop palette files into the app to load.

Editing Features:

  • Use Alt+Mousewheel to zoom in and out
  • Edit transparent images! To create a transparent image, go to Image > Attributes… and select Transparent, then OK, and then Image > Clear Image or use the Eraser tool. Images with any translucent pixels will open in Transparent mode.
  • You can crop the image by making a selection while holding Ctrl
  • Keyboard shortcuts for rotation: Ctrl+. and Ctrl+, (< and >)
  • Rotate by any arbitrary angle in Image > Flip/Rotate
  • In Image > Stretch/Skew, you can stretch more than 500% at once
  • Zoom to an arbitrary scale in View > Zoom > Custom…
  • Zoom to fit the canvas within the window with View > Zoom > Zoom To Window
  • Non-contiguous fill: Replace a color in the entire image by holding Shift when using the fill tool

Miscellaneous Improvements:

  • Vertical Color Box mode, accessible from Extras > Vertical Color Box
  • You can use the Text tool at any zoom level (and it previews the exact pixels that will end up on the canvas).
  • Spellcheck is available in the textbox if your browser supports it.
  • Resize handles are easier to grab than in Windows 10's Paint.
  • Omits some Thumbnail view bugs, like the selection showing in the wrong place.
  • Unlimited undos/redos (as opposed to a measly 3 in Windows XP, or a measly 50 in Windows 7)
  • Undo history is nonlinear, which means if you undo and do something other than redo, the redos aren't discarded. Instead, a new branch is created in the history tree. Jump to any point in history with Edit > History or Ctrl+Shift+Y
  • Automatically keeps a backup of your image. Only one backup per image tho, which doesn't give you a lot of safety. Remember to save with File > Save or Ctrl+S! Manage backups with File > Manage Storage.
mobipaint.png

** Limitations:

A few things with the tools aren't done yet. See TODO.md

Full clipboard support in the web app requires a browser supporting the Async Clipboard API w/ Images, namely Chrome 76+ at the time of writing.

In other browsers you can still copy with Ctrl+C, cut with Ctrl+X, and paste with Ctrl+V, but data copied from JS Paint can only be pasted into other instances of JS Paint. External images can be pasted in.

Local Graph

org-roam 7ad4a126-0b9f-4dc0-9968-cd9135bf8b1e Useful Software 0c139c35-2577-4e81-9904-dc11da80d35a JS Paint 7ad4a126-0b9f-4dc0-9968-cd9135bf8b1e->0c139c35-2577-4e81-9904-dc11da80d35a a3c19488-876c-4b17-81c0-67b9c7fc64ee Open-Source 0c139c35-2577-4e81-9904-dc11da80d35a->a3c19488-876c-4b17-81c0-67b9c7fc64ee 05f2a17c-4ceb-42fa-bcc8-16d61473804b World Wide Web 0c139c35-2577-4e81-9904-dc11da80d35a->05f2a17c-4ceb-42fa-bcc8-16d61473804b d06bd038-1d11-470c-a3fe-cb49fa5ac662 98.js 0c139c35-2577-4e81-9904-dc11da80d35a->d06bd038-1d11-470c-a3fe-cb49fa5ac662