252 lines
10 KiB
HTML
252 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JS Paint</title>
|
|
|
|
<link href="styles/normalize.css" rel="stylesheet" type="text/css">
|
|
<link href="styles/layout.css" rel="stylesheet" type="text/css">
|
|
<link href="styles/print.css" rel="stylesheet" type="text/css" media="print">
|
|
|
|
<link rel="apple-touch-icon" href="images/icons/apple-icon-180x180.png">
|
|
<!-- 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/192x192.png">
|
|
<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"> -->
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="red">
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<meta name="msapplication-TileColor" content="#008080">
|
|
<meta name="msapplication-TileImage" content="images/icons/ms-icon-144x144.png">
|
|
<meta name="theme-color" content="#000080">
|
|
|
|
<meta name="viewport" content="width=device-width, user-scalable=no">
|
|
|
|
<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">
|
|
<meta name="twitter:title" content="JS Paint">
|
|
<meta name="twitter:description" content="Classic MS Paint in the browser, with extra features">
|
|
<meta name="twitter:image" content="https://jspaint.app/images/meta/twitter-card-plz-no-crop.png">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@isaiahodhner">
|
|
<meta name="twitter:creator" content="@isaiahodhner">
|
|
|
|
<script src="src/theme.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="about-paint" style="display: none">
|
|
<h1 id="about-paint-header">
|
|
<img src="images/icons/32x32.png" width="32" height="32" id="paint-32x32" 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>
|
|
|
|
<div id="maybe-outdated-view-project-news" hidden>
|
|
<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>
|
|
</div>
|
|
<div id="checking-for-updates" hidden>
|
|
Checking for updates...
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
<div id="news" hidden>
|
|
<article class="news-entry" id="news-2019-polygon-text-and-select">
|
|
<h1>Polygon, Text, and Select</h1>
|
|
<time datetime="2019-12-04">2019-12-04</time>
|
|
<p>
|
|
Handles are now way easier to drag, with extended click targets, similar to Paint from Windows 7.
|
|
It's like not unreasonable to use with a touch screen now!
|
|
This applies to selections, textboxes, and the main canvas handles.
|
|
</p>
|
|
<p>
|
|
Resizing selections and textboxes when zoomed in is <a href="https://github.com/1j01/jspaint/issues/13#issuecomment-562247085">finally fixed</a>!
|
|
</p>
|
|
<p>
|
|
The Text tool now perfectly previews the pixels that will be placed on the canvas.
|
|
What you see is what you get!
|
|
Also it retains all browser editing behavior, like spellcheck,
|
|
using a convoluted, yet elegant overlaying strategy.
|
|
(I prototyped this <a href="https://jsfiddle.net/1j01/wnac09u3/">here</a>
|
|
and <a href="https://jsfiddle.net/1j01/qkvfjn1r/">here</a> if you're interested.)
|
|
</p>
|
|
<p>
|
|
With the fill-only option selected, the Polygon tool now previews with inverted lines, as in mspaint.
|
|
(When you finish the polygon, the boundary of the shape matches the preview exactly,
|
|
because it actually <em>does</em> draw a stroke, just the same color as the fill.)
|
|
</p>
|
|
</article>
|
|
<article class="news-entry" id="news-2019-zoom-viewport">
|
|
<h1>Zoom To Mouse</h1>
|
|
<time datetime="2019-10-26">2019-10-26</time>
|
|
<p>
|
|
<b class="new">New:</b> The Magnifier now lets you zoom to a specific location,
|
|
showing a preview of the new viewport.
|
|
</p>
|
|
<p>
|
|
Also, when zooming out with the Magnifier,
|
|
or changing the zoom from the toolbar or menus,
|
|
the top left corner of the viewport is now kept anchored.
|
|
</p>
|
|
<p>
|
|
Also, pasting a selection will now go to the top left of the viewport,
|
|
instead of the entire document.
|
|
</p>
|
|
</article>
|
|
<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>
|
|
<style>
|
|
#news {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
.news-entry {
|
|
padding: 20px;
|
|
max-width: 30em;
|
|
}
|
|
.news-entry > h1 {
|
|
font-size: 1.3em;
|
|
margin: 0;
|
|
margin-bottom: 0.3em;
|
|
}
|
|
.news-entry > time {
|
|
font-size: 1.2em;
|
|
color: gray;
|
|
}
|
|
.news-entry .new {
|
|
color: green;
|
|
}
|
|
</style>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<script src="lib/pep.js"></script>
|
|
<script src="lib/canvas.toBlob.js"></script>
|
|
<script src="lib/gif.js/gif.js"></script>
|
|
<script src="lib/palette.js"></script>
|
|
<script src="lib/FileSaver.js"></script>
|
|
<script src="lib/font-detective.js"></script>
|
|
<script src="lib/libtess.min.js"></script>
|
|
|
|
<script src="src/helpers.js"></script>
|
|
<script src="src/storage.js"></script>
|
|
<script src="src/$Component.js"></script>
|
|
<script src="src/$Window.js"></script>
|
|
<script src="src/$MenuBar.js"></script>
|
|
<script src="src/$ToolBox.js"></script>
|
|
<script src="src/$ColorBox.js"></script>
|
|
<script src="src/$FontBox.js"></script>
|
|
<script src="src/$Handles.js"></script>
|
|
<script src="src/OnCanvasObject.js"></script>
|
|
<script src="src/OnCanvasSelection.js"></script>
|
|
<script src="src/OnCanvasTextBox.js"></script>
|
|
<script src="src/OnCanvasHelperLayer.js"></script>
|
|
<script src="src/image-manipulation.js"></script>
|
|
<script src="src/tool-options.js"></script>
|
|
<script src="src/tools.js"></script>
|
|
<!--<script src="src/extra-tools.js"></script>-->
|
|
<script src="src/functions.js"></script>
|
|
<script src="src/manage-storage.js"></script>
|
|
<script src="src/imgur.js"></script>
|
|
<script src="src/help.js"></script>
|
|
<script src="src/simulate-random-gestures.js"></script>
|
|
<script src="src/menus.js"></script>
|
|
<script src="src/app.js"></script>
|
|
<script src="src/sessions.js"></script>
|
|
<script src="lib/konami.js"></script>
|
|
<script src="src/vaporwave-fun.js"></script>
|
|
|
|
<script>
|
|
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>
|
|
<noscript>
|
|
<h1><img src="images/icons/32x32.png" width="32" height="32" 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>
|
|
</body>
|
|
</html>
|