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
|
|
|
|
2019-10-07 04:11:44 +00:00
|
|
|
<link rel="apple-touch-icon" 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. -->
|
2019-10-07 04:11:18 +00:00
|
|
|
<!-- <link rel="icon" type="image/png" sizes="192x192" href="images/icons/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
|
|
|
|
2019-10-08 20:44:50 +00:00
|
|
|
<meta name="description" content="Classic MS Paint in the browser, with extra features" />
|
|
|
|
|
<meta property="og:image:width" content="279">
|
|
|
|
|
<meta property="og:image:height" content="279">
|
|
|
|
|
<meta property="og:description" content="Classic MS Paint in the browser, with extra features.">
|
|
|
|
|
<meta property="og:title" content="JS Paint">
|
|
|
|
|
<meta property="og:url" content="https://jspaint.app">
|
|
|
|
|
<meta property="og:image" content="https://jspaint.app/images/icons/og-image-279x279.jpg">
|
2018-06-13 02:59:53 +00:00
|
|
|
<meta name="twitter:title" content="JS Paint">
|
2019-10-08 20:44:50 +00:00
|
|
|
<meta name="twitter:description" content="Classic MS Paint in the browser, with extra features">
|
2019-10-08 20:50:54 +00:00
|
|
|
<meta name="twitter:image" content="https://jspaint.app/images/meta/twitter-card-plz-no-crop.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-10-10 16:19:20 +00:00
|
|
|
<h1 id="about-paint-header">
|
|
|
|
|
<img src="images/icons/32x32.png" width="32" height="32" alt=""/>
|
|
|
|
|
<span id="jspaint-project-name">JS Paint</span>
|
|
|
|
|
<small id="jspaint-version" title="expect bugs!">Alpha</small>
|
|
|
|
|
<button id="view-project-news">View Project News</button>
|
|
|
|
|
</h1>
|
|
|
|
|
|
2019-10-10 03:33:39 +00:00
|
|
|
<div id="maybe-outdated-view-project-news" hidden>
|
2019-10-10 15:23:51 +00:00
|
|
|
<div id="maybe-outdated-line">
|
|
|
|
|
<div id="outdated" hidden>
|
|
|
|
|
<div class="on-official-host">
|
|
|
|
|
There's a new version of JS Paint. <a id="refresh-to-update" href=".">Refresh</a> to get it.
|
|
|
|
|
</div>
|
|
|
|
|
<div class="on-third-party-host">
|
|
|
|
|
This instance of JS Paint is outdated compared to <a href="https://jspaint.app" target="_blank">jspaint.app</a>.
|
|
|
|
|
</div>
|
|
|
|
|
<div class="on-dev-host">
|
|
|
|
|
This version of JS Paint is outdated compared to <a href="https://jspaint.app" target="_blank">jspaint.app</a>.
|
|
|
|
|
</div>
|
2019-10-10 03:33:39 +00:00
|
|
|
</div>
|
2019-10-10 15:23:51 +00:00
|
|
|
<div id="checking-for-updates" hidden>
|
|
|
|
|
Checking for updates...
|
2019-10-10 03:33:39 +00:00
|
|
|
</div>
|
2019-10-10 15:23:51 +00:00
|
|
|
<div id="failed-to-check-if-outdated" hidden>
|
|
|
|
|
Couldn't check for updates.
|
|
|
|
|
<span class="navigator-offline">You're offline.</span>
|
|
|
|
|
<span class="navigator-online">JS Paint may be outdated.</span>
|
2019-10-10 03:33:39 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2019-10-10 16:19:20 +00:00
|
|
|
|
2019-10-10 03:33:39 +00:00
|
|
|
</div>
|
2019-07-07 05:14:58 +00:00
|
|
|
<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>
|
2019-10-10 03:33:39 +00:00
|
|
|
<div id="news" hidden>
|
|
|
|
|
<article class="news-entry" id="news-2019-grid-zoom-cursors">
|
|
|
|
|
<h1>The Grid, Custom Zoom, and Dynamic Cursors</h1>
|
|
|
|
|
<time datetime="2019-10-09">2019-10-09</time>
|
|
|
|
|
<p>
|
|
|
|
|
<b class="new">New:</b> The Grid. Zoom to 4x+ and use <b>View > Zoom > Show Grid</b> or <kbd>Ctrl+G</kbd> to enable.
|
|
|
|
|
This works with browser zoom as well to provide crisp gridlines even if you zoom in with your browser.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<b class="new">New:</b> <b>View > Zoom > Custom Zoom</b>,
|
|
|
|
|
including an actually-custom numerical zoom option, unlike MS Paint.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<b class="new">New:</b> Dynamic cursors for brush and eraser,
|
|
|
|
|
so you now have a preview of exactly where the tool will draw.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Also, in the event that your browser clears canvases to free up memory,
|
|
|
|
|
you should be more likely to be able to undo to get back to a useful state.
|
|
|
|
|
</p>
|
|
|
|
|
</article>
|
|
|
|
|
<article class="news-entry" id="news-2019-async-clipboard">
|
|
|
|
|
<h1>Full Clipboard Support</h1>
|
|
|
|
|
<time datetime="2019-09-21">2019-09-21</time>
|
|
|
|
|
<p>
|
|
|
|
|
JS Paint now lets you copy real image data to the Clipboard, both with keyboard shortcuts and from the Edit menu.
|
|
|
|
|
This feature is available in Chrome 76+. Other browsers don't support it yet, as of Sep 2019.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Also: paste a URL to an image, and JS Paint will load it, as an alternative to <b>File > Load from URL</b>.
|
|
|
|
|
</p>
|
|
|
|
|
</article>
|
2019-10-10 04:02:55 +00:00
|
|
|
<style>
|
2019-10-10 04:41:49 +00:00
|
|
|
#news {
|
2019-10-10 04:02:55 +00:00
|
|
|
background: white;
|
2019-10-10 04:41:49 +00:00
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
.news-entry {
|
|
|
|
|
padding: 20px;
|
2019-10-10 04:02:55 +00:00
|
|
|
max-width: 30em;
|
|
|
|
|
}
|
|
|
|
|
.news-entry > h1 {
|
|
|
|
|
font-size: 1.3em;
|
|
|
|
|
margin: 0;
|
2019-10-10 04:41:49 +00:00
|
|
|
margin-bottom: 0.3em;
|
2019-10-10 04:02:55 +00:00
|
|
|
}
|
|
|
|
|
.news-entry > time {
|
2019-10-10 04:41:49 +00:00
|
|
|
font-size: 1.2em;
|
2019-10-10 04:02:55 +00:00
|
|
|
color: gray;
|
|
|
|
|
}
|
|
|
|
|
.news-entry .new {
|
|
|
|
|
color: green;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2019-10-10 03:33:39 +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"><\/script>');
|
|
|
|
|
</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>
|
2019-10-06 00:03:55 +00:00
|
|
|
<script src="src/simulate-random-gestures.js"></script>
|
2017-05-26 20:31:26 +00:00
|
|
|
<script src="src/menus.js"></script>
|
2019-10-26 16:29:09 +00:00
|
|
|
<script src="src/app.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>
|
2019-10-07 03:50:43 +00:00
|
|
|
<h1><img src="images/icons/32x32.png" width="32" height="32" alt=""/> JS Paint</h1>
|
2019-10-05 10:46:25 +00:00
|
|
|
|
|
|
|
|
<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>
|