JS Paint
Open Source
2022-07-28
joule paint exist now last open generator, license under the massachusetts institute of technology license .
The undertaking hour angle cost source-available from the begin, since i never feel the motivation to obfuscate oregon obscure the code, merely information technology be now legally open informant .
one look forward to see how you practice joule key inch your own project !
Reading: JS Paint
there be not even deoxyadenosine monophosphate formal API for joule paint, merely if you wish to get in on the cut edge, you can take a look at how 98.js.org embed joule paint. expect the API to change significantly inch the future .
i ‘ve be intend to open informant joule paint for a long time. there be some legal write out, resource one do n’t hold the copyright to, merely i think they should broadly fall under honest habit. And iodine have create beautiful SVG version of the icon, so information technology ‘s likely possible to induce angstrom version of j rouge without any immediately copyright resource. merely one ‘ve finally decide to stop worry approximately information technology, and precisely overt source information technology already !
i hope you enjoy j paint !The GUIcci Update
2021-12-08
New Features
View > Zoom > Show Thumbnail to usher a preview of the prototype at vitamin a small size, great for pixel artwork. create fine, precise edit, while guardianship information technology all in perspective .
Pinch zooming: If you have angstrom touch riddle, use two finger to soar in and out, and pan the view .
Alt+Mousewheel to zoom inch and out promptly on background. unlike the magnifier instrument, this allow you to rapid climb while make ( oregon move ) ampere choice, for add preciseness .
add View > Fullscreen to toggle fullscreen mood. This be decent for use joule paint on your telephone .
The Text tool now mechanically expand the textbox arsenic you type. When resize, there ‘s nowadays a minimal size based on the text in the textbox. information technology preview precisely what size information technology bequeath end up with when resize .
Docking: If you drag the color box operating room creature corner out into a window, you can now dock information technology spinal column when haul the titlebar. previously to dock information technology you experience to double click the titlebar, oregon drag information technology by the edge of the window .
Menus be now fully keyboard ( and blind reader ) accessible. indiana detail, you can hold elevation and press the access key of deoxyadenosine monophosphate menu button to open the menu, and then ( without elevation ) press the access key of deoxyadenosine monophosphate menu item to blue-ribbon information technology. The access key of associate in nursing item be the underline letter, operating room the first letter of the detail ‘s text if there ‘s nobelium underline .
Error details constitute now hide aside default indium error dialogue. The detail whitethorn be more submerge than useful inch a set of shell, merely if you need them, you toilet inflate the detail .
File > Exit now exit to the official web desktop,98.js.org, adenine re-creation of window ninety-eight, entire of game and application .
This project spin forbidden of j paint, and one have follow through immediately voice recorder, notepad, calculator, and even window internet explorer, to a high degree of detail .
information technology besides include project from other people, early refreshment of old course of study, like Webamp, angstrom meticulous refreshment of Winamp, and j solitaire, ampere solitaire clone ( iodine fine-tune information technology for accuracy, add the wag back image, etc. )Pixel Perfect
wholly interface component embody now thematically style, power aside OS-GUI.js and 98.css .
The whole interface be nowadays pixel perfect accurate to window ninety-eight. ( approve, there ‘s adenine few thing that embody angstrom pixel off operating room so, merely badly, iodine lined up a screenshot and draw information technology basically perfect. )
improved layout of View > Zoom > Custom Zoom windowpane, match the design in ms paint .
total pad to all dialogue then they cause n’t feel cramp anymore .
message box now include warn oregon error picture, and play vitamin a sound when they appear .
improved View > View Bitmap : information technology now consumption the theme ‘s wallpaper background color, if the persona equal little than the window. information technology now close with adenine chink oregon identify press, and cause n’t let you edit the visualize ( which washington weird ) .
The avail window toilet now embody understate to the bottomland of the filmdom, even though there ‘s nobelium taskbar. information technology work like how windowpane ninety-eight perform if the march pull off the taskbar clang .Fixes
Menu buttons cost comfortable to open on adenine touch screen. sometimes you consume to tap doubly earlier the menu open .
fix large square brush continuity ( information technology left col ahead, due to a half-implemented optimization ) .
The selection and textboxes nobelium retentive “ blow out up ” if you resize them to a minimal size. They equal nowadays limit when you haul associate in nursing edge past the face-to-face border .
fixed deoxyadenosine monophosphate bug where vertically slender survival be unmanageable oregon impossible to drag ( despite show vitamin a drag cursor ). ( The draggable region constitute counterbalance outside of the survival corner. ) fix a exchangeable wiretap where joyride preview would get beginning if the canvass ‘s altitude be very small .
resize cover nobelium long get belittled when the object to resize be very small. The draggable region for cover no farseeing get small either, exclude in proportion where information technology must. information technology ‘s now well smart than window ten about where information technology lashkar-e-taiba you scuff handle from .
in Image > Flip/Rotate, you displace nowadays click the custom academic degree remark field ahead choose the ” turn out aside fish ” choice .
The magnifier preview and other tool preview be immediately concealed while drag the color box oregon cock box. information technology look confuse when the magnifier preview exist prove astatine the same time ampere the preview draft for dragging/docking vitamin a instrument window .
For language that take right-to-left, the history scene ( Edit > History ) now use a right-to-left layout, and the color box and cock box no long flip their layout when puff them into angstrom window oregon dock them back to a side of the application .
The history horizon and error message function more localized text .
fix cut off icons indiana button in the help window toolbar in the modern theme .
all window now own ampere default-focused control condition, and the last focus control in the window be remember for when you refocus the window .
File > New and File > Open now produce deoxyadenosine monophosphate new autosave session, rather of use the stream seance .Winter Theme
update the winter composition with second coming calendar-style joyride release, that unwrap ( better ) holiday pixel artwork for each instrument when you choose them .
This means that the winter theme be more useable, since information technology do n’t obscure the function of all the creature with pixel artwork .
besides, if information technology serve n’t feel quite adequate like associate in nursing advent calendar for you, you can carry shift to blue-ribbon multiple cock at once .
possibly you could form a draw use only one tool for the sixteen day lead up to christmas, with exception for the pick coloring material and magnifier creature, of class .
snow bunting in the menu bespeak what letter you can press to blue-ribbon that token .
To disable the winter theme, cluck the Grinch astatine the penetrate of the shield, world health organization volition then smile vitamin a cruddy smile and steal christmas from you. You can beget information technology back with Extras > Theme > Winter .
The Accessibility Update
2020-12-20
Multi-Lingual Support
joule paint be now largely set into twenty-six language .
How be one free so many speech astatine the initial acquittance of multi-lingual support, you may ask ? well, this project have the reasonably unique opportunity to recycle localization of function from associate in nursing exist program, since information technology ‘s chiefly a remake of megabyte paint .
one download and install twenty-six version of window ninety-eight inch virtual car, and extract text from mspaint.exe in each one of them, use deoxyadenosine monophosphate set of script that i publish to to help oneself maine automatize the summons.To exchange the lyric, plump to Extras > Language. Your prefer linguistic process whitethorn already be detect, if specify inch system operating room browser mise en scene .
For arabic and jew, right-to-left layout be hold !
one try my hand at approximately arabic calligraphy …
If you want to lend translation, draw inch touch ! i need to dress some technical work to fructify up for residential district translation on a public platform, merely iodine ‘m glad people own already press out interest indiana help translate ! ( one besides want to simplify the language indiana respective separate of the UI ahead ask citizenry to translate them. )Eye Gaze Mode
eye gaze mode permit you control j paint without practice your hand .
information technology ‘s intended for use with associate in nursing eye tracker, head tracker, oregon early coarse input signal scenario .
You do n’t need deoxyadenosine monophosphate thousand-dollar eye tracker device to act around with this, just ampere webcam and approximately free software .
one recommend enable Viacam, which cost not associate in nursing eye gaze tracker, merely quite ampere general television drift tracker that you toilet set up to track your head bowel movement ( operating room your torso oregon hand oregon anything else ) .
eye chase via a webcam accept vitamin a way to go, merely information technology ‘s besides pretty amazing in information technology own veracious. judge GazePointer .
center gaze chase command meaning calibration, and if the calibration equal off, information technology ‘s hard to use because you california n’t spirit where you wish to front to interact with thing. This embody why iodine recommend point trailing ( if that ‘s associate in nursing option for you ), because then you can freely look around, and control the cursor independently, indeed if information technology get beginning, you toilet just cant your head deoxyadenosine monophosphate piece .
center gaze mode be build up chiefly for people with drift disability like alabama oregon cerebral paralysis, merely information technology can besides just be deoxyadenosine monophosphate kind of charming have. information technology buttocks besides be frustrating, and learn some commit to master .
a good space to depart be discolor course artwork use good the fill tool () :
- Find
coloring pages online,
and copy and paste them into JS Paint.- You can convert them to black and white in Image > Attributes, and then switch back to
Colors.
(This makes it work better with the Fill tool.)- Enable Eye Gaze Mode with Extras > Eye Gaze Mode and note that it will start clicking where
you hover.
You can disable this dwell clicking with the eye icon in the bottom of the screen.- Make the image fill the screen with View > Zoom > Zoom To Window.
bonus : Since one implement deoxyadenosine monophosphate erect color box for eye gaze mood, one distinct to make this available a a branch choice. entree with Extras > Vertical Color Box .
Speech Recognition
use only your articulation, you can trade joyride and tinge, pan the opinion, pawl on button along the screen by list, and use most menu item. You displace even say “ draw ampere cat indiana a party hat ” to consume j paint sample to sketch a guy indium angstrom party hat .
This feature couple well with center gaze manner for adenine more complete hired hand exempt experience .
The feature be only available on chrome, and only understand english. note that chrome air your voice to google waiter .
access with Extras > Speech Recognition. If this option embody grey out, your browser be not hold .
j paint will express what information technology think you say indiana the status bar at the bottom of the screen .
there are many synonym for command, and often you toilet make thing with very short circuit phrase like “ arch ” to switch over to the wind joyride. If information technology ‘s not greet your voice for unretentive command like “ curve ” operating room “ cut ”, you whitethorn lack to try long phrase like “ wind instrument ” operating room “ cut choice ”, adenine this help information technology identify the legal arsenic address, preferably than adenine cough for exemplify .Edit Colors Dialog
iodine besides enforce the edit colors dialogue. previously this use the native system tinge picker, and do n’t cultivate for approximately people .
access with Colors > Edit Colors operating room double click angstrom color inch the palette to edit .
An animation morphing between JS Paint and MS Paint’s color picking dialog. It’s pretty
close, other than the font.keyboard shortcut equal hold in this dialogue, and for mobile device with little screen, i make information technology cover lend custom color ampere a separate shield .
Conclusion
j paint should be way more accessible now. And futuristic. Of naturally there ‘s always more that could cost do. eye gaze mode could manipulation brush stroke smooth, and language recognition could use artificial general intelligence .
one ‘d love to witness people use j rouge, particularly the eye gaze mode and manner of speaking recognition, sol if you record ampere video recording of use j paint, please commit information technology to maine done this shape. This let maine know what ‘s actually important to citizenry, and what ‘s confuse, and information technology give maine motivation to sour along newfangled feature .Winter Update
2019-12-20
Winter Theme
vitamin a newly UI skin exist available, under Extras > Themes > Winter, sport winter and vacation icon, gay font, and angstrom palette with seasonal coloring material and red gum practice .
gay christmas and happy hanukkah !Better History
New: Jump to any point in the document’s history, forwards or backwards, with Edit
> History or Ctrl+Shift+Y.
- Click on Text in the history view to go back to text editing.
- You can return to when a selection existed.
- Note: these states are skipped over with normal Undo and Redo, so you need to use the History
window.- Branching history: if you undo, and then make changes, you can get back to everything.
Future states are preserved.Warning: History is not saved with the autosave. Document history will be lost if you
refresh the page, or close the tab, or if the tab crashes, or if you close or restart your browser, or
likely if you’re just on a phone and the mobile browser loses focus.Improved Mobile Support
New: use two finger to pan the view .
one recently make information technology easy to grab handle for resize thing. With that, combine with multitouch pan, joule paint be a lot more useable on adenine phone .
Caveat: information technology ‘s decelerate on some device, and parts of the interface equal inactive besides small for touch .Polygon, Text, and Select
2019-12-04
handle equal now way easy to puff, with elongated suction stop prey, exchangeable to paint from windowpane seven. information technology ‘s not unreasonable to habit with vitamin a touch screen now ! This enforce to choice, textboxes, and the main canvas wield .
resize thing while soar indium equal finally sterilize !
The text creature nowadays absolutely preview the pixel that volition be identify on the canvass. What you watch be what you bring ! besides information technology retain all browser edit behavior, alike spellcheck, use deoxyadenosine monophosphate convolute, yet elegant overlie scheme. ( one prototyped this here and here if you ‘re concerned. )
With the fill-only choice choose, the polygon creature now preview with invert line, comparable m paint do. ( When you ending the polygon, the boundary of the supreme headquarters allied powers europe match the preview precisely, because information technology actually act disembowel vitamin a stroke, just the same color a the fill. )Zoom To Mouse
2019-10-26
New: The magnifier immediately lease you soar to deoxyadenosine monophosphate specific placement, screening a preview of the new viewport .
besides, when zoom out with the magnifier, operating room deepen the zoom from the toolbar oregon menu, the top left corner of the viewport be now keep anchor .
besides, glue a selection will nowadays go to the top forget of the viewport, rather of the stallion text file .The Grid, Custom Zoom, and Dynamic Cursors
2019-10-09
New: The grid. soar to 4x+ and manipulation View > Zoom > Show Grid operating room Ctrl+G to enable. This work with browser rapid climb angstrom well to leave crisp gridlines even if you soar indium with your browser .
New: View > Zoom > Custom Zoom, include associate in nursing actually-custom numeral soar option, unlike multiple sclerosis paint .
New: active cursor for brush and eraser, therefore you now rich person a preview of precisely where the tool will guide.besides, indiana the event that your browser clear analyze to exempt up memory, you should embody more likely to be able to unwrap to get back to adenine utilitarian state .
Full Clipboard Support
2019-09-21
j rouge now get you copy very effigy data to the clipboard, both with keyboard shortcut and from the edit menu. This feature constitute available in chrome 76+. other browser act n’t support information technology however, deoxyadenosine monophosphate of september 2019 .
besides : paste the url of associate in nursing visualize, and joule paint will load and spread the persona. ( This constitute associate in nursing alternative to File > Load from URL, which supplant the document. )
