All Projects → 1j01 → Jspaint

1j01 / Jspaint

🎨 Classic MS Paint, REVIVED + ✨Extras

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Jspaint

Mopaint
🎨💪 Modern, modular paint and more! (pre-alpha, not much done yet)
Stars: ✭ 50 (-99.16%)
Mutual labels:  web-application, online, paint, painting, web-app, drawing, image-manipulation, image-editor, app, html5, canvas
powerpaint
Kreative PowerPaint - Library and Application for Bitmap and Vector Image Editing
Stars: ✭ 27 (-99.55%)
Mutual labels:  drawing, paint, image-editing, image-editor, painting
Tui.image Editor
🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
Stars: ✭ 4,761 (-20.28%)
Mutual labels:  paint, drawing, image, image-editor, canvas
Kiddopaint
Kiddo Paint
Stars: ✭ 189 (-96.84%)
Mutual labels:  paint, retro, html5, canvas
Minipaint
online image editor
Stars: ✭ 1,014 (-83.02%)
Mutual labels:  paint, drawing, html5, canvas
Literallycanvas
A canvas in your browser. Literally.
Stars: ✭ 1,043 (-82.54%)
Mutual labels:  paint, drawing, html5, canvas
Sketchpad
Sketchpad is fully customisable collaborative whiteboard plugin written in pure JavaScript.
Stars: ✭ 85 (-98.58%)
Mutual labels:  paint, drawing, editor, canvas
Zmjimageeditor
ZMJImageEditor is a picture editing component like WeChat. It is powerful and easy to integrate, supporting rendering, text, rotation, tailoring, mapping and other functions. (ZMJImageEditor 是一个和微信一样图片编辑的组件,功能强大,极易集成,支持绘制、文字、旋转、剪裁、贴图等功能)
Stars: ✭ 470 (-92.13%)
Mutual labels:  image, image-editor, editor
One Html Page Challenge
Can you create something cool without modern tools?
Stars: ✭ 205 (-96.57%)
Mutual labels:  retro, html5, canvas
Pixelfarm
From Vectors to (sub) Pixels, C# 2D Rendering Library
Stars: ✭ 120 (-97.99%)
Mutual labels:  painting, drawing, canvas
Quick Picture Viewer
🖼️ Lightweight, versatile desktop image viewer for Windows. The best replacement for the default Windows photo viewer.
Stars: ✭ 237 (-96.03%)
Mutual labels:  image, editor, app
Pretty Painter
Graphics editor for Android.
Stars: ✭ 105 (-98.24%)
Mutual labels:  paint, drawing, canvas
Drawingboard.js
A canvas based drawing app that you can integrate easily on your website.
Stars: ✭ 2,072 (-65.3%)
Mutual labels:  paint, drawing, canvas
Pinta
Simple GTK# Paint Program
Stars: ✭ 802 (-86.57%)
Mutual labels:  painting, drawing, image-editor
Listloading
listloading是一个移动端的上拉、下拉加载更多的组件。主要依赖于iscroll.js v5.1.2基础上开发的组件,基础库可以使用jquery.js或者zepto.js操作dom节点,目前我是使用了zepto.js作为基础库操作dom,以jquery插件的形式存在。如果不想以插件方式使用,则只需要把listloading直接移植你需要的库里面就ok啦。listloading主要针对移动端而生,在使用浏览器自带滚动,用户体验很不友好,与Android和ios差别甚远,所以选择iscroll.js,它实现方式是使用css3动画translate 3D 转换来实现滚动效果,transform属性使用硬件加速,性能方法得到很大提高。 https://gtdalp.github.io/widget/listloading/demos/listloading.html
Stars: ✭ 169 (-97.17%)
Mutual labels:  web-app, app, html5
Theorytracker
🎼 HTML5/WebAudio multi-track functional harmony analysis and songwriting app! -- https://hlorenzi.github.io/theorytracker/
Stars: ✭ 62 (-98.96%)
Mutual labels:  web-application, web-app, html5
Seashore
easy to use mac osx image editing application for the rest of us
Stars: ✭ 182 (-96.95%)
Mutual labels:  image, image-editor, editor
Sketch
Sketch have a lot of basic functions to develop a drawing app for iPhone. Anyone can easily create drawing iOS Application.
Stars: ✭ 229 (-96.17%)
Mutual labels:  paint, painting, drawing
Drawing
Drawing and fill color
Stars: ✭ 37 (-99.38%)
Mutual labels:  drawing, paint, painting
Pixelcraft
A Pixel Art Editor
Stars: ✭ 413 (-93.08%)
Mutual labels:  image-manipulation, editor, canvas

JS Paint

A nice web-based MS Paint remake and more... Try it out!

The goal is to remake MS Paint (including its little-known features), improve on it, and to extend the types of images it can edit. So far, it does this pretty well.

Screenshot

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:

  • Cross-platform
  • 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.
  • 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.
  • Switch themes from the Extras menu. Dark mode included.
  • Vertical Color Box mode, accessible from Extras > Vertical Color Box
  • 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.
  • You can shoot at the application Asteroids style
  • When you do Edit > Paste From... you can select transparent images. 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, though only as a bitmap. (Note: it may open super large, or tiny. There's no option to choose a size when opening.)
  • 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
  • Use Alt+Mousewheel to zoom in and out
  • Touch support: use two fingers to pan the view, and pinch to zoom
  • View > Fullscreen to toggle fullscreen mode, nice for mobile devices
  • Non-contiguous fill: Replace a color in the entire image by holding Shift when using the fill tool
  • 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.
  • Rudimentary multi-user 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.
  • 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 (of any format) into the app to load. (Dragging and dropping image files also works, to load images.)
  • Click/tap the selected colors area to swap the foreground and background colors
  • 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.

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 Extension Name Read Write Read Palette Write Palette
.png PNG
.bmp, .dib [Monochrome Bitmap][BMP]
.bmp, .dib [16 Color Bitmap][BMP]
.bmp, .dib [256 Color Bitmap][BMP]
.bmp, .dib [24-bit Bitmap][BMP] N/A N/A
.tif, .tiff, .dng, .cr2, .nef TIFF (loads first page)
.pdf PDF (loads first page)
.webp WebP 🌐 🌐
.gif GIF 🌐 🌐
.jpeg, .jpg JPEG 🌐 🌐 N/A N/A
.svg SVG (only default size) 🌐
.ico ICO (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.

"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 Extension Name Programs Read Write
.pal [RIFF] Palette [MS Paint] for Windows 95 and Windows NT 4.0
.gpl [GIMP][Gimp] Palette [Gimp], [Inkscape], [Krita], [KolourPaint], [Scribus], [CinePaint], [MyPaint]
.aco Adobe Color Swatch Adobe [Photoshop]
.ase Adobe Swatch Exchange Adobe [Photoshop], [InDesign], and [Illustrator]
.txt [Paint.NET] Palette [Paint.NET]
.act Adobe Color Table Adobe [Photoshop] and [Illustrator]
.pal, .psppalette [Paint Shop Pro] Palette [Paint Shop Pro] (Jasc Software / Corel)
.hpl [Homesite] Palette Allaire [Homesite] / Macromedia [ColdFusion]
.cs ColorSchemer ColorSchemer Studio
.pal [StarCraft] Palette [StarCraft]
.wpe [StarCraft] Terrain Palette [StarCraft]
.sketchpalette [Sketch] Palette [Sketch]
.spl [Skencil] Palette [Skencil] (formerly called Sketch)
.soc StarOffice Colors [StarOffice], [OpenOffice], [LibreOffice]
.colors KolourPaint Color Collection [KolourPaint]
.colors Plasma Desktop Color Scheme [KDE] Plasma Desktop
.theme Windows Theme [Windows] Desktop
.themepack Windows Theme [Windows] Desktop
.css, .scss, .styl Cascading StyleSheets Web browsers / web pages
.html, .svg, .js any text files with CSS colors Web 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?)

Desktop App

JS Paint can be installed as a PWA, altho it doesn't work offline.

(Also I made some effort to build it into a desktop app with Electron and Electron Forge, but this will use unnecessary system resources and is not recommended. See this issue.)

Development Setup

Clone the repo.

Install Node.js if you don't have it, then open up a command prompt / terminal in the project directory.

Testing

Run npm run lint to check for code problems.

Run npm test to run browser-based tests with Cypress. (It's slow to start up and run tests, unfortunately.)

Run npm run accept to accept any visual changes. This unfortunately re-runs all the tests, rather than accepting results of the previous test, so you could end up with different results than the previous test. If you use GitHub Desktop, you can view diffs of images, in four different modes.

To open the Cypress UI, first run npm run test:start-server, then concurrently npm run cy:open

Tests are also run in continuous integration with Travis CI.

Web App (https://jspaint.app)

After you've installed dependencies with npm i, use npm run dev to start a live-reloading server.

Make sure any layout-important styles go in layout.css. When updating layout.css, a right-to-left version of the stylesheet is generated, using RTLCSS.
You should test the RTL layout by changing the language to Arabic or Hebrew. Go to Extras > Language > العربية or עברית.
See Control Directives for how to control the RTL layout.

Desktop App (Electron)

This is unreleased and not in development.

  • Install dependencies with npm i
  • Start the electron app with npm run electron:start

electron-debug is included, so you can use Ctrl+R to reload and F12/Ctrl+Shift+I to open the devtools.

You can build for production with npm run electron:make

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].