JS Paint continues to evolve as a premier Online Paint application, offering a rich and accessible digital art experience directly in your browser. Developed by Isaiah Odhner, this project is not just a remake of MS Paint; it’s a significant step forward, bringing classic drawing tools into the modern web era with innovative features and a commitment to user accessibility. This article dives into the latest updates, showcasing how JS Paint stands out as a powerful and user-friendly online paint tool for everyone.
Enhanced Accessibility for Everyone
JS Paint is dedicated to making digital art accessible to all users. The latest updates introduce a suite of accessibility features, making it easier for individuals with diverse needs to create and enjoy online paint.
Streamlined Accessibility Features
The “Eye Gaze Mode” has been refined into distinct, user-selectable features, offering greater flexibility and customization:
- ↩️ Quick Undo Button: Located conveniently on the screen, this floating undo button simplifies error correction, especially beneficial for touchscreen users. No more cumbersome menu navigation – just tap to undo mistakes instantly in your online paint creation.
- 🔍 Enlarge UI: Magnifies menus, buttons, and windows, improving visibility and usability, particularly on smaller screens or for users with visual impairments. Enjoy a more comfortable and accessible online paint interface.
- ⏱️ Dwell Clicker: Enables automatic clicking by hovering over controls. This feature is designed for use with eye trackers or head trackers, allowing for hands-free interaction with the online paint program.
- ↕️ Vertical Color Box: Offers a taller, more vertically oriented color palette, catering to different user preferences and screen layouts within the online paint environment.
🧑 Head Tracker: Hands-Free Cursor Control
A groundbreaking addition is the Head Tracker mode, empowering users to control the cursor with head movements via their webcam. Integrated with Tracky Mouse, this feature offers a truly hands-free online paint experience.
To experience head tracking:
- Activate Extras > Head Tracker.
- Click Start and grant camera access.
- Ensure your face is well-lit and centered in the camera view.
- Adjust sensitivity and smoothness settings to personalize your online paint control.
- Move your head to guide the red dot (cursor) and hover to interact with the online paint interface.
Tips for Head Tracking:
- Pause dwell clicking by hovering over the pause button () located at the bottom left.
- The system intelligently detects when to hold down the mouse button for dragging or drawing actions, releasing on the next dwell.
- Minimize the Tracky Mouse window to a menu bar button for easy access and restoration, or close it to disable the feature.
Currently, head tracking works with dwell clicking, but future updates may incorporate alternative clicking methods like blinking or smiling, further enhancing the accessibility of this online paint tool. For users seeking system-wide head tracking, the Tracky Mouse desktop app is also available.
Discord Community and Improved Interface
Join the 98.JS.org Discord Server
Connect with fellow JS Paint users and the developer on the new 98.JS.org Discord server. Share your online paint creations, discuss features, and engage with a vibrant community.
Animation of Discord logo blinking its eyes
Animation credit: Wolfie-le-Wolf
Compact and Informative About Window
The Help > About Paint window has been redesigned for improved clarity and conciseness, presenting more information in a smaller footprint. A visual comparison on GitHub showcases the enhanced design, allowing users to easily compare the before and after versions using swipe or onion skin modes.
Bubblegum Theme: A Playful New Look
Introducing the 🫧 Bubblegum theme, a whimsical and visually striking option for your online paint canvas. This theme reimagines office software aesthetics with an elegant “Business Pink” color scheme, offering a unique and refreshing online paint experience.
Screenshot of JS Paint with the Bubblegum theme
AI-Generated Icons: An Experiment in Design
The Bubblegum theme features icons generated using AI technology, pushing the boundaries of design within this online paint application. While current AI icon generation presents challenges in consistency and style, this experiment showcases the potential of AI in creative tools. The icons, mostly untouched from their AI generation, add a distinctive and slightly unconventional flair to the theme. A standout icon, the Eye Gaze Mode pause button (), emerged unexpectedly from an AI misinterpretation of “eye dropper,” demonstrating the serendipitous creativity that can arise from AI experimentation in online paint design. The 3D bevels are also AI-generated, employing 9-slice borders extensively.
Try the Bubblegum Theme
Activate the Bubblegum theme by navigating to Extras > Themes > Bubblegum. For optimal viewing of the AI-generated icons, especially at smaller sizes, consider using it with Extras > Enlarge UI or increasing your browser’s zoom level (Ctrl + mouse wheel or ⌘ + mouse wheel).
Themes and File Format Enhancements
JS Paint offers a variety of themes to personalize your online paint workspace, along with expanded file format support for greater flexibility.
Updated and New Themes
The theme selection has been refined with new additions and updates:
-
Modern Light & Modern Dark: The Modern theme is now split into Modern Light and Modern Dark, offering both light and dark variations. The themes feature custom SVG icons inspired by Windows Vista, redesigned for improved contrast and visual appeal.
Modern Light before (tool icons from Windows Vista): Modern Light after (custom SVG icons):
Modern Dark before (tool icons from Windows Vista, with aliasing artifacts when viewed against a dark background): Modern Dark after (custom SVG icons):
The Brush tool icon in the Modern themes has been redesigned to resemble the Classic flat-tipped brush, enhancing visual clarity and tool differentiation within the online paint interface.
-
Classic Light & Classic Dark: The Classic theme is now Classic Light, with an updated Classic Dark theme featuring redesigned monochrome icons for improved contrast and a refined aesthetic.
Classic Light (still using tool icons from Windows 98):
Classic Dark before: Classic Dark after:
The monochrome icons in Classic Dark offer a clean, elegant look, though the developer welcomes contributions for a colored icon version for those who prefer more vibrant visuals in their online paint experience.
-
Occult Theme Update: The Occult theme has been further developed with updated icons, including a cauldron for the Fill With Color tool, a dagger for the Pick Color tool, and an eyeball for the Magnifier, enhancing its distinctive and thematic visual style in this online paint application.
Occult before: Occult after:
Explore these themes and personalize your online paint experience via Extras > Themes.
Expanded File Format Support
JS Paint now offers greater control over saving your creations with File > Save As, prompting for file name and format selection. Supported formats include PNG, GIF, and BMP, including indexed color BMPs. Refer to the Supported File Formats table for detailed format information.
Tip: PNG is recommended for general use due to its superior quality for saving online paint artwork, unless a specific format is required.
The Black and White mode in Image > Attributes is now generalized to support any two arbitrary colors, offering more flexibility while retaining its original “Black and White” name in the Attributes window. In Black and White mode, Image > Invert now intelligently swaps the two colors in the image, providing intuitive color manipulation for online paint users.
Colors > Save Colors also now supports file name and format selection, with a wide array of supported color palette formats. You can even export color palettes as CSS variables for web design projects, extending the utility of this online paint tool beyond digital art creation. RIFF Palette (*.pal) compatibility with MS Paint and GIMP Palette (*.gpl) compatibility with open-source graphics programs like Inkscape and Krita are included. Discover a wealth of palettes at Lospec and load them into JS Paint via Colors > Get Colors or drag and drop, expanding your color options in this versatile online paint application.
API Access and Homepage
API Documentation
JS Paint now features initial API documentation, enabling embedding and integration into other projects. While still in draft form and subject to change, the documented API provides a starting point for developers interested in leveraging JS Paint’s capabilities within their own applications. Explore the Embed in your website section of the readme for embedding instructions and consider the API for advanced online paint integration.
JS Paint Homepage
JS Paint has launched its official homepage at jspaint.app/about, designed with a nostalgic 90s web aesthetic, complete with a background pattern.
Open Source Initiative
JS Paint is now officially open source under the MIT License, inviting community contributions and fostering further development of this online paint tool. While previously source-available, this formal open-source licensing encourages collaboration and innovation. Explore the 98.js.org project for examples of embedding JS Paint and anticipate API evolution as the project matures within the open-source ecosystem. The developer acknowledges past concerns regarding copyrighted resources and expresses confidence in fair use and the ongoing creation of SVG icon alternatives, solidifying JS Paint’s future as a community-driven online paint resource.
GUIcci Update: Refinements and New Features
The “GUIcci Update” brings a host of user interface and feature enhancements to JS Paint, further solidifying its position as a polished and feature-rich online paint application.
GUIcci Update Banner
New Functionalities
-
View > Zoom > Show Thumbnail: Displays a small preview of the entire image, invaluable for pixel art and detailed editing, providing a constant overview while working on fine details in your online paint project.
-
Pinch Zooming: Touchscreen users can now pinch to zoom and pan, enhancing the mobile online paint experience.
-
Alt+Mousewheel Zoom: Desktop users can quickly zoom in and out using Alt + Mousewheel, offering precise zoom control during selections and movements, surpassing the limitations of the Magnifier tool for detailed online paint work.
-
View > Fullscreen: Toggles fullscreen mode, optimizing the interface for mobile and focused online paint sessions.
-
Text Tool Auto-Expansion: The Text tool now dynamically expands the textbox as you type, with resizing maintaining a minimum size based on the text content, ensuring intuitive text handling within your online paint creations.
-
Docking Enhancements: Dragging toolboxes out into windows now allows for easy docking by dragging the title bar, simplifying workspace customization in this online paint environment. Previously, docking required double-clicking the title bar or dragging by the window edge.
Toolbar Drag Area -
Keyboard Accessible Menus: Menus are now fully keyboard and screen reader accessible, enabling navigation and item selection using Alt + access keys (underlined letters or the first letter of the item’s text), enhancing accessibility for all users of this online paint tool.
-
Hidden Error Details: Error dialogs now hide detailed error information by default, reducing visual clutter while still allowing users to expand details when needed, streamlining the user experience of this online paint application.
-
File > Exit to 98.js.org: File > Exit now directs users to 98.js.org, a web-based recreation of Windows 98 featuring various applications and games, expanding the ecosystem beyond just online paint.
98.js.org Screenshot
Pixel Perfection and Interface Polish
- Themed Interface Elements: All UI elements are now thematically styled using OS-GUI.js and 98.css, achieving pixel-perfect accuracy to Windows 98 aesthetics, providing a nostalgic and visually consistent online paint interface.
- Custom Zoom Window Layout: The View > Zoom > Custom Zoom window layout is improved to match MS Paint’s design, enhancing familiarity for long-time users of online paint programs.
- Dialog Padding: Added padding to dialogs eliminates cramped layouts, improving readability and user experience within this online paint application.
- Message Box Icons and Sounds: Message boxes now include warning or error icons and play sounds upon appearance, enhancing user feedback and clarity in this online paint environment.
- View Bitmap Improvements: View > View Bitmap now uses the theme’s wallpaper background color if the image is smaller than the window, closes with a click or key press, and prevents image editing in view mode, refining the image viewing experience within the online paint tool.
- Minimizable Help Window: The Help window can now be minimized to the bottom of the screen, mimicking Windows 98 behavior when the taskbar process crashes, offering a unique interface quirk within this online paint application.
Bug Fixes and Refinements
Numerous bug fixes and refinements enhance the stability and usability of JS Paint as an online paint tool:
- Improved menu button responsiveness on touchscreens.
- Fixed large square brush continuity issues.
- Prevented selection and textbox “blow-up” when resizing to minimal sizes.
- Addressed dragging issues with vertically thin selections.
- Corrected tool preview offsets on canvases with very small heights.
- Improved resize handle behavior and drag regions, surpassing Windows 10 in handle usability.
- Enabled custom degrees input field selection before choosing “Rotate by angle” in Image > Flip/Rotate.
- Hidden magnifier and tool previews while dragging toolboxes to reduce visual confusion.
- Right-to-left layout support for History view and consistent toolbox layout in right-to-left languages.
- Improved text localization in History view and error messages.
- Fixed cut-off icons in help window toolbar in the Modern theme.
- Default focus control and remembered focus in all windows for improved keyboard navigation.
- File > New and File > Open now create new autosave sessions, ensuring data integrity in this online paint application.
Winter Theme: Festive Interface
The Winter theme is updated with advent calendar-style tool buttons, revealing festive pixel art upon tool selection, enhancing usability while maintaining holiday spirit within this online paint application. Holding Shift allows for selecting multiple tools simultaneously, and snowflakes in menus indicate access keys. Disable the Winter theme by clicking the Grinch at the bottom, or re-enable it via Extras > Theme > Winter.
Winter Theme Screenshot
Accessibility Update: Multi-Lingual Support and More
The “Accessibility Update” significantly expands JS Paint’s reach with multi-lingual support and enhanced accessibility features, making it a truly global and inclusive online paint tool.
Multi-Lingual Support: 26 Languages
JS Paint now supports 26 languages, leveraging localizations from Windows 98 to offer a comprehensive multi-lingual experience right from the initial release. Languages can be changed via Extras > Language, with automatic detection based on system or browser settings.
Language Menu
Right-to-left layout is supported for Arabic and Hebrew, demonstrating JS Paint’s commitment to global accessibility in online paint.
Arabic Calligraphy
Contributions to translations are welcomed, with future plans for community translation platforms.
Eye Gaze Mode: Hands-Free Control
Eye Gaze Mode enables hands-free control of JS Paint, designed for users with movement disabilities but also offering a novel interaction method for all users of this online paint application. Recommended software includes Enable Viacam for head tracking and GazePointer for eye tracking (webcam-based). Head tracking is suggested for its independent cursor control and easier calibration compared to eye tracking.
Eye Gaze Control
Eye Gaze Mode is activated via Extras > Eye Gaze Mode, with dwell clicking enabled by default (toggleable via the eye icon at the bottom). A vertical color box option is available via Extras > Vertical Color Box, initially developed for Eye Gaze Mode but now accessible separately.
Speech Recognition: Voice Control
Speech Recognition allows for voice-based control of JS Paint, enabling tool and color switching, view panning, button clicking by name, and menu item selection. Limited to Chrome and English language, this feature pairs with Eye Gaze Mode for a comprehensive hands-free online paint experience. Access via Extras > Speech Recognition (grayed out if browser unsupported). Voice commands are displayed in the status bar, and longer phrases may improve recognition accuracy for short commands like “Curve” or “Cut.”
Sea Lion Speech
Edit Colors Dialog: Enhanced Color Selection
The newly implemented Edit Colors dialog (Colors > Edit Colors or double-click a color in the palette) replaces the native system color picker, offering improved functionality and accessibility, including keyboard shortcuts and mobile-optimized layout.
Edit Colors Dialog Animation
Conclusion: A Futuristic and Accessible Online Paint Tool
JS Paint has become a significantly more accessible and feature-rich online paint tool. While continuous improvements are envisioned, such as brush stroke smoothing for Eye Gaze Mode and advanced AI for Speech Recognition, the current state of JS Paint offers a powerful and user-friendly experience for a wide range of users. User feedback is encouraged, especially videos of JS Paint usage (submitted via this form), to guide future development and feature prioritization for this evolving online paint application.
Winter Update: Festive Theme and History Improvements
Winter Update Candy Cane
Winter Theme: Holiday Cheer
The Winter theme, accessible via Extras > Themes > Winter, brings holiday icons, fonts, and a seasonal color palette to JS Paint, adding festive cheer to your online paint creations during the winter season.
Enhanced History Feature
The History feature (Edit > History or Ctrl+Shift+Y) is significantly improved, enabling users to jump to any point in the document’s history, forward or backward, and revisit text edits and selections. Branching history preserves future states even after undoing and making changes. Note that history is not saved with autosave and is lost on page refresh or browser closure.
Mobile Support and Usability Enhancements
Improved Mobile Experience
Multitouch panning and easier handle grabbing for resizing selections and textboxes significantly enhance mobile usability of JS Paint as an online paint tool, though performance may vary across devices, and some interface elements remain small for touch interaction.
Polygon, Text, and Selection Tool Improvements
Handle dragging is now easier with extended click targets, similar to Windows 7 Paint, enhancing touch screen usability for selections, textboxes, and canvas handles within this online paint application. Resizing while zoomed in is fixed, the Text tool now provides perfect pixel previews, and the Polygon tool previews with inverted lines when the fill-only option is selected, mirroring MS Paint’s behavior.
Zoom to Mouse and Viewport Control
The Magnifier tool now supports zooming to a specific location with a viewport preview. Zooming out or changing zoom levels anchors the top-left viewport corner. Pasting selections now places them at the top-left of the viewport instead of the entire document, refining zoom and viewport management within this online paint tool.
Grid, Custom Zoom, and Dynamic Cursors
The Grid feature (View > Zoom > Show Grid or Ctrl+G, enabled at 4x+ zoom) provides crisp gridlines even with browser zoom. Custom Zoom (View > Zoom > Custom Zoom) offers numerical zoom input. Dynamic cursors for Brush and Eraser tools provide precise drawing previews, enhancing user feedback in this online paint application. Improved undo reliability in case of browser canvas clearing enhances data recovery.
Full Clipboard Support
JS Paint now supports copying real image data to the clipboard (Chrome 76+), enabling clipboard integration via keyboard shortcuts and the Edit menu. Pasting image URLs loads and pastes images as an alternative to File > Load from URL, expanding image import options for this versatile online paint tool.
