MS Paint remake

Classic MS Paint, REVIVED + ✨Extras

A pixel-perfect web-based MS Paint remake and more. JS Paint recreates every tool and menu of MS Paint to a high degree of fidelity:

It supports even little-known features, themes, additional file types, and accessibility features like Eye Gaze Mode and Speech Recognition (more information on github).

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 the author is making JS Paint. He wants to bring good old Paint into the modern era.

Current improvements

  • 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
  • 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: https://paint.fernandoruizrico.com/#load:https://i.imgur.com/zJMrWwb.png
    • Rudimentary multi-user collaboration support. Start up a session at https:/paint.fernandoruizrico.com/#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 mode included.
  • Eye Gaze Mode, for use with an eye tracker, head tracker, or other coarse input device, accessible from Extras > Eye Gaze Mode. With just a webcam, you can try it out with Enable Viacam (head tracker) or GazePointer (eye tracker).
  • Speech Recognition Mode. Using your voice you can select tools and colors, pan the view (“scroll down and to the left”, or “go southwest”, etc.), explore the menus (but you can activate any menu item without opening the menus first), interact with windows (including scrolling the history view with “scroll up”/”scroll down” etc.), dictate text with the Text tool, and even tell the application to sketch things (for instance, “draw a house”)
  • 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.
JS Paint drawing of JS Paint on a phone

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 can 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.

Supported File Formats

Image Formats

⚠️ Saving as JPEG will introduce artifacts that cause problems when using the Fill tool or transparent selections.

⚠️ Saving in some formats will reduce the number of colors in the image.

💡 Unlike in MS Paint, you can use Edit > Undo to revert color or quality reduction from saving. This doesn’t undo saving the file, but allows you to then save in a different format with higher quality, using File > Save As.

💡 Saving as PNG is recommended as it gives small file sizes while retaining full quality.

File ExtensionNameReadWriteRead PaletteWrite Palette
.pngPNG🔜
.bmp, .dibMonochrome Bitmap🔜
.bmp, .dib16 Color Bitmap🔜
.bmp, .dib256 Color Bitmap🔜
.bmp, .dib24-bit BitmapN/AN/A
.tif, .tiff, .dng, .cr2, .nefTIFF (loads first page)
.pdfPDF (loads first page)
.webpWebP🌐🌐
.gifGIF🌐🌐
.jpeg, .jpgJPEG🌐🌐N/AN/A
.svgSVG (only default size)🌐
.icoICO (only default size)🌐

Capabilities marked with 🌐 are currently left up to the browser to support or not. If “Write” is marked with 🌐, the format will appear in the file type dropdown but may not work when you try to save. For opening files, see Wikipedia’s browser image format support table for more information.

Capabilities marked with 🔜 are coming soon, and N/A of course means not applicable.

“Read Palette” refers to loading the colors into the Colors box automatically (from an indexed color image), and “Write Palette” refers to writing an indexed color image.

Color Palette Formats

With Colors > Save Colors and Colors > Get Colors you can save and load colors in many different formats, for compatibility with a wide range of programs.

If you want to add extensive palette support to another application, I’ve made this functionality available as a library:  AnyPalette.js

File ExtensionNameProgramsReadWrite
.palRIFF PaletteMS Paint for Windows 95 and Windows NT 4.0
.gplGIMP PaletteGimpInkscapeKritaKolourPaintScribusCinePaintMyPaint
.acoAdobe Color SwatchAdobe Photoshop
.aseAdobe Swatch ExchangeAdobe PhotoshopInDesign, and Illustrator
.txtPaint.NET PalettePaint.NET
.actAdobe Color TableAdobe Photoshop and Illustrator
.pal, .psppalettePaint Shop Pro PalettePaint Shop Pro (Jasc Software / Corel)
.hplHomesite PaletteAllaire Homesite / Macromedia ColdFusion
.csColorSchemerColorSchemer Studio
.palStarCraft PaletteStarCraft
.wpeStarCraft Terrain PaletteStarCraft
.sketchpaletteSketch PaletteSketch
.splSkencil PaletteSkencil (formerly called Sketch)
.socStarOffice ColorsStarOfficeOpenOfficeLibreOffice
.colorsKolourPaint Color CollectionKolourPaint
.colorsPlasma Desktop Color SchemeKDE Plasma Desktop
.themeWindows ThemeWindows Desktop
.themepackWindows ThemeWindows Desktop
.css, .scss, .stylCascading StyleSheetsWeb browsers / web pages
.html, .svg, .jsany text files with CSS colorsWeb browsers / web pages

Did you know?

  • There’s a black and white mode with patterns instead of colors in the palette, which you can get to from Image > Attributes…
  • You can drag the color box and tool box around if you grab them by the right place. You can even drag them out into little windows. You can dock the windows back to the side by double-clicking on their title bars.
  • In addition to the left-click foreground color and the right-click background color, there’s a third color you can access by holding Ctrl while you draw. It starts out with no color so you’ll need to hold Ctrl and select a color first. The fancy thing about this color slot is you can press and release Ctrl to switch colors while drawing.
  • 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. Try scribbling with the Free-Form Select tool and then doing Image > Invert
  • These Tips and Tricks from a tutorial for MS Paint also work in JS Paint:
    •  Brush Scaling (+ & - on the number pad to adjust brush size)
    •  “Custom Brushes” (hold Shift and drag the selection to smear it)
    •  The ‘Stamp’ “Tool” (hold Shift and click the selection to stamp it)
    •  Image Scaling (+ & - on the number pad to scale the selection by factors of 2)
    •  Color Replacement (right mouse button with Eraser to selectively replace the foreground color with the background color)
    •  The Grid (Ctrl+G & Zoom to 4x+)
    •  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!)
    •  Scroll Wheel Bug (Hmm, let’s maybe not recreate this?)

Animated sprite editors and pixel art tools

Introduction

You will find in this post several free and open-source 2D sprite editors and pixel art tools that can be used on your browser to create fancy pictures and animations.

Pixelorama

Pixelorama is an awesome free and open source pixel art editor, proudly created with the Godot engine, by Orama Interactive. Whether you want to make animated pixel art, game graphics, tiles and any kind of pixel art you want, Pixelorama has you covered with its variety of tools and features (you can find online documentation here). Free to use for everyone:

Pixelorama

Current features

  • A variety of different tools to help you draw, with the ability to map a different tool in each left and right mouse buttons.
  • Are you an animator? Pixelorama has its own animation timeline just for you! You can work at an individual cel level, where each cel refers to a unique layer and frame. Supports onion skinning, cel linking, motion drawing and frame grouping with tags.
  • Custom brushes, including random brushes.
  • Create or import custom palettes.
  • Import images and edit them inside Pixelorama. If you import multiple files, they will be added as individual animation frames. Importing spritesheets is also supported.
  • Export your gorgeous art as PNG, as a single file, a spritesheet or multiple files, or GIF file.
  • Pixel perfect mode for perfect lines, for the pencil, eraser & lighten/darken tools.
  • Autosave support, with data recovery in case of a software crash.
  • Horizontal & vertical mirrored drawing.
  • Tile mode for pattern creation.
  • Rectangular & isometric grid types.
  • Scale, rotate and apply multiple image effects to your drawings.
  • Multi-language localization support! See the Crowdin page for more details.

You can find more information on github.

Piskel

Piskel is an easy-to-use sprite editor. It can be used to create game sprites, animations, pixel-art, etc.:

Piskel

The Piskel editor is purely built in JavaScript, HTML and CSS, using also the following libraries :

  • spectrum : awesome standalone colorpicker.
  • gifjs : generate animated GIFs in javascript, using webworkers.
  • supergif : modified version of SuperGif to parse and import GIFs.
  • jszip : create, read and edit .zip files with Javascript.
  • canvas-toBlob : shim for canvas toBlob.
  • jquery : used sporadically in the application.
  • bootstrap-tooltip : nice tooltips.

You can find more information on github.

Pixel Art to CSS

Did you know that you can create pixel art using CSS? Pixel Art to CSS is an online editor that helps you with that task. Combining the power of both box-shadow and keyframes CSS properties, you will get CSS code ready to use in your site. Furthermore, you can download your work in different formats such as a static image, animated GIF or sprite like image.

Pixel Art to CSS aims to be an intuitive tool by its simplicity, however it is equipped with a wide range of features: customize your color palette, go back and forth in time, modify animation settings, save or load your projects, among others.

Pixel Art to CSS

This application has been built with the following technologies:

  • React: Library to build the UI.
  • Redux: Implements a Flux like architecture.
  • ImmutableJS: Helps to keep the data immutable aiming to avoid side effects.
  • PostCSS: Handle the app CSS.
  • NodeJS + Express: Optional server side to build an universal application, create and serve the generated drawings.

You can find more information on gihub.

Pixel art

A bit old, and not fully functional, but still, another interesting browser based pixel art maker and animation tool:

Pixel art

You will find more information on github.