2014-05-04 13:32:02 +00:00
<!doctype html>
2018-06-13 02:35:03 +00:00
< html lang = "en" >
2014-05-04 13:32:02 +00:00
< head >
< meta charset = "utf-8" >
2019-07-07 05:24:49 +00:00
< title > JS Paint< / title >
2019-09-27 22:00:25 +00:00
2017-05-30 03:05:05 +00:00
< link href = "styles/normalize.css" rel = "stylesheet" type = "text/css" >
2017-01-28 21:31:05 +00:00
< link href = "styles/layout.css" rel = "stylesheet" type = "text/css" >
< link href = "styles/print.css" rel = "stylesheet" type = "text/css" media = "print" >
2019-09-27 22:00:25 +00:00
< link rel = "apple-touch-icon" sizes = "57x57" href = "images/icons/apple-icon-57x57.png" >
< link rel = "apple-touch-icon" sizes = "60x60" href = "images/icons/apple-icon-60x60.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "images/icons/apple-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "76x76" href = "images/icons/apple-icon-76x76.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "images/icons/apple-icon-114x114.png" >
< link rel = "apple-touch-icon" sizes = "120x120" href = "images/icons/apple-icon-120x120.png" >
< link rel = "apple-touch-icon" sizes = "144x144" href = "images/icons/apple-icon-144x144.png" >
< link rel = "apple-touch-icon" sizes = "152x152" href = "images/icons/apple-icon-152x152.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "images/icons/apple-icon-180x180.png" >
2019-09-28 02:09:23 +00:00
<!-- Chrome will pick the largest image for some reason, instead of the most appropriate one. -->
<!-- <link rel="icon" type="image/png" sizes="192x192" href="images/icons/android - icon - 192x192.png">
2019-09-29 18:36:45 +00:00
< link rel = "icon" type = "image/png" sizes = "32x32" href = "images/icons/32x32.png" >
< link rel = "icon" type = "image/png" sizes = "96x96" href = "images/icons/96x96.png" > -->
<!-- <link rel="icon" type="image/png" sizes="16x16" href="images/icons/16x16.png"> -->
2019-09-28 02:33:10 +00:00
< link rel = "shortcut icon" href = "favicon.ico" >
2019-09-29 17:22:04 +00:00
< link rel = "mask-icon" href = "images/icons/safari-pinned-tab.svg" color = "red" >
2019-10-02 14:43:05 +00:00
< link rel = "manifest" href = "manifest.webmanifest" >
2019-10-07 02:51:12 +00:00
< meta name = "msapplication-TileColor" content = "#008080" >
2019-09-27 22:00:25 +00:00
< meta name = "msapplication-TileImage" content = "images/icons/ms-icon-144x144.png" >
2019-10-07 02:28:10 +00:00
< meta name = "theme-color" content = "#000080" >
2019-09-27 22:00:25 +00:00
2018-06-13 02:35:03 +00:00
< meta name = "viewport" content = "width=device-width, user-scalable=no" >
2019-09-27 22:00:25 +00:00
2018-06-13 03:01:47 +00:00
< meta name = "description" content = "MS Paint recreated in JavaScript, with extra features" / >
2018-06-13 02:35:03 +00:00
< meta property = "og:title" content = "JS Paint" / >
2018-06-13 03:01:47 +00:00
< meta property = "og:description" content = "MS Paint recreated in JavaScript, with extra features" / >
2018-06-13 02:35:03 +00:00
< meta property = "og:type" content = "website" / >
< meta property = "og:url" content = "https://jspaint.app" / >
< meta property = "og:locale" content = "en_US" / >
2018-06-13 04:03:26 +00:00
< meta property = "og:image" content = "https://jspaint.app/images/meta/facebook-card.png" / >
2018-06-13 02:59:53 +00:00
< meta name = "twitter:title" content = "JS Paint" >
2018-06-13 03:01:47 +00:00
< meta name = "twitter:description" content = "MS Paint recreated in JavaScript, with extra features" >
2018-06-13 04:03:26 +00:00
< meta name = "twitter:image" content = "https://jspaint.app/images/meta/twitter-card.png" >
2018-06-13 02:59:53 +00:00
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:site" content = "@isaiahodhner" >
< meta name = "twitter:creator" content = "@isaiahodhner" >
2018-06-13 02:35:03 +00:00
2018-01-22 20:10:09 +00:00
< script src = "src/theme.js" > < / script >
2014-08-19 20:53:19 +00:00
< / head >
< body >
2018-06-21 02:23:18 +00:00
< div id = "about-paint" style = "display: none" >
2019-09-29 18:36:45 +00:00
< h1 > < img src = "images/icons/32x32.png" alt = "" / > JS Paint < small class = "version-number" title = "Is that a thing? What I mean is, expect bugs!" > Public Alpha< / small > < / h1 >
2019-07-07 05:14:58 +00:00
< hr / >
< p > JS Paint is a web-based remake of MS Paint by < a href = "https://isaiahodhner.ml/" > Isaiah Odhner< / a > .< / p >
< p > Read about the project and < b > extra features< / b > on < a href = "https://github.com/1j01/jspaint#readme" > the README< / a > .< / p >
< p > Request features and report bugs < a href = "https://github.com/1j01/jspaint/issues" > on GitHub< / a >
or < a href = "mailto:isaiahodhner@gmail.com?subject=JS%20Paint" > by email< / a > .< / p >
2019-07-07 04:24:55 +00:00
< p > If you want to support the project & cover domain fees:
< a href = "https://www.paypal.me/IsaiahOdhner" target = "_blank" > paypal.me/IsaiahOdhner< / a >
< / p >
2018-06-21 02:23:18 +00:00
< / div >
2018-08-24 01:45:25 +00:00
2019-09-28 17:16:18 +00:00
< script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
>< / script >
< script >
window.jQuery || document.write('< script src = "lib/jquery-3.4.1.min.js" > < \ / s c r i p t > ' ) ;
< / script >
2015-06-21 01:02:47 +00:00
< script src = "lib/pep.js" > < / script >
2014-05-04 13:32:02 +00:00
< script src = "lib/canvas.toBlob.js" > < / script >
< script src = "lib/gif.js/gif.js" > < / script >
2015-06-16 01:29:30 +00:00
< script src = "lib/palette.js" > < / script >
2015-06-17 00:07:11 +00:00
< script src = "lib/FileSaver.js" > < / script >
2015-06-28 18:16:55 +00:00
< script src = "lib/font-detective.js" > < / script >
2018-08-24 01:45:25 +00:00
< script src = "lib/libtess.min.js" > < / script >
2014-08-19 20:15:09 +00:00
< script src = "src/helpers.js" > < / script >
2015-10-14 23:30:46 +00:00
< script src = "src/storage.js" > < / script >
2014-08-19 20:15:09 +00:00
< script src = "src/$Component.js" > < / script >
< script src = "src/$Window.js" > < / script >
2017-05-26 20:31:26 +00:00
< script src = "src/$MenuBar.js" > < / script >
2014-08-19 20:15:09 +00:00
< script src = "src/$ToolBox.js" > < / script >
< script src = "src/$ColorBox.js" > < / script >
< script src = "src/$FontBox.js" > < / script >
< script src = "src/$Handles.js" > < / script >
2016-03-25 14:55:53 +00:00
< script src = "src/OnCanvasObject.js" > < / script >
2019-09-20 16:31:03 +00:00
< script src = "src/OnCanvasSelection.js" > < / script >
2019-09-20 16:34:14 +00:00
< script src = "src/OnCanvasTextBox.js" > < / script >
Save undos/redos as ImageData & fix Free-Form Select
- (PARTIALLY avoid a browser bug in chrome. When you zoom to a non-integer scale, there's this weird quantum antialiasing due to the canvas having a backing store which is higher density than the canvas's logical pixels (and redraw regions come into play as well). Switching to storing ImageData instead of canvases for undos/redos doesn't eliminate much of this problem, but it avoids having the undos/redos also store some high-DPI state and thereby SOMETIMES restore a state of whether antialiasing is happening or not. So it's a little less weird now, but it doesn't really solve that bugginess.)
- Protect against data loss when running low on memory. The browser (chrome at least) can clear canvases when low on memory. If the data is erased, and you undo, or do anything to the canvas, jspaint saves over the autosave. Ideally there should be multiple autosaves, but for now this is catastrophic in terms of data loss. Using ImageData instead of canvases, hopefully the browser is less willing to destroy this data, since it's more like a plain data structure in your program, and you would hope it wouldn't just delete arbitrary data in your program. A crash should be better than losing the canvas data (undos/redos) because in that case the autosave should still be in tact, altho this doesn't protect against the case where the main canvas is cleared by the browser, and then you do something to interact with the canvas other than undo/redo, and then either the page crashes or you refresh, and the autosave will still be gone.
- Behavior change or Regression: Now if the document is transparent, but the document mode is opaque, and you paste something larger than the canvas, it'll keep the transparency in the area of the original document, because it's using putImageData instead of drawImage.
- Regression: When you choose Opaque in the Image > Attributes... it no longer makes the document opaque because it's using putImageData instead of drawImage.
- Fix: Rewrite the Free-Form Select's temporary shape preview to use a proper layer instead of abusing the undo stack. This reduces the number of undo states created, and should make it easier to implement passive selections in the future. (Selections shouldn't create an undo state until you start dragging them.) This should also fix a bug in multiplayer where "inverty brush" could be left behind.
2019-09-30 05:21:32 +00:00
< script src = "src/OnCanvasHelperLayer.js" > < / script >
2014-08-19 20:15:09 +00:00
< script src = "src/image-manipulation.js" > < / script >
< script src = "src/tool-options.js" > < / script >
< script src = "src/tools.js" > < / script >
2018-02-17 06:45:06 +00:00
<!-- <script src="src/extra - tools.js"></script> -->
2014-08-19 20:15:09 +00:00
< script src = "src/functions.js" > < / script >
2016-09-29 03:12:21 +00:00
< script src = "src/manage-storage.js" > < / script >
2018-01-20 20:25:24 +00:00
< script src = "src/imgur.js" > < / script >
2015-10-13 18:56:42 +00:00
< script src = "src/help.js" > < / script >
2014-10-02 21:17:43 +00:00
< script src = "src/app.js" > < / script >
2017-05-26 20:31:26 +00:00
< script src = "src/menus.js" > < / script >
2015-02-23 17:46:57 +00:00
< script src = "src/canvas-change.js" > < / script >
2016-03-24 16:38:37 +00:00
< script src = "src/sessions.js" > < / script >
2018-04-09 04:36:51 +00:00
< script src = "lib/konami.js" > < / script >
< script src = "src/vaporwave-fun.js" > < / script >
2019-07-07 05:07:08 +00:00
2019-07-07 05:14:58 +00:00
< script >
2019-07-07 05:07:08 +00:00
if(/MSIE \d|Trident.*rv:/.test(navigator.userAgent)){
document.write(
'< style > body { text-align : center ; } < / style > ' +
'< div className = "not-supported" > ' +
'< h1 className = "not-supported-header" > Internet Explorer is not supported!< / h1 > ' +
'< p className = "not-supported-details" > Try Chrome, Firefox, or Edge.< / p > ' +
'< / div > '
);
}
< / script >
2019-10-05 10:46:25 +00:00
< noscript >
< h1 > < img src = "images/icons/32x32.png" alt = "" / > JS Paint< / h1 >
< p > This application requires JavaScript to run.< / p >
< p >
Assuming this is the official instance of jspaint,
at < a href = "https://jspaint.app" > https://jspaint.app< / a > ,
you can safely enable JavaScript.
< / p >
< p > You can also check out < a href = "https://github.com/1j01/jspaint" > the source code and project info< / a > .< / p >
< / noscript >
2014-05-04 13:32:02 +00:00
< / body >
< / html >
