jay817/win32.run
1
0
Fork 0
mirror of https://github.com/ducbao414/win32.run.git synced 2025-12-17 01:32:50 +09:00
Code Issues Actions Packages Projects Releases Wiki Activity

init the awkward code

Browse Source
This commit is contained in:
Bao Nguyen
2023-02-13 19:32:10 +07:00
commit 27170afcac
5426 changed files with 1244579 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/html/jspaint/help/cloud-mask.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

BIN
static/html/jspaint/help/clouds.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 185 KiB

209
static/html/jspaint/help/coUA.css Normal file
View File

@@ -0,0 +1,209 @@
/* Originally: Cascading Style Sheet for IE4.01 last updated 1-28-98 */
/* for scrollbars and selection color */
@import "../lib/os-gui/windows-98.css";
body {
background: #FFFFFF;
/* background: var(--Info); */
/* color: var(--InfoText); */
color: var(--WindowText);
font-size: 70%;
font-family: Verdana, Arial, Helvetica, "MS Sans Serif";
}
a:link {
color: #0000CC;
color: var(--HotTrackingColor);
}
a:active {
color: #996699;
}
a:visited {
color: #996699;
}
p {
margin-top: .6em;
margin-bottom: .6em;
}
p.bigfix {
margin-top: -.4em;
margin-bottom: 0em;
}
p.margin {
/* for SMS links */
margin-left: 2em;
margin-top: -1.75em;
}
p.K2 {
margin-top: 0em;
margin-left: 10pt;
}
/* HEADING TAGS */
h1 {
font-size: 145%;
margin-bottom: .5em;
}
h2 {
font-size: 125%;
margin-top: 1.5em;
margin-bottom: .5em;
}
h3 {
font-size: 110%;
margin-top: 1.2em;
margin-bottom: .5em;
}
h4 {
font-size: 105%;
margin-top: 1.2em;
margin-bottom: .5em;
}
h5 {
font-size: 100%;
margin-top: 1.2em;
margin-bottom: .5em;
}
big {
font-weight: bold;
font-size: 105%;
}
p.proclabel {
/* procedure heading */
font-weight: bold;
font-size: 100%;
margin-top: 1.2em;
}
/* LIST TAGS */
ol {
margin-top: .6em;
margin-bottom: 0em;
margin-left: 4em; /* @FIXME */
}
ul {
margin-top: .6em;
margin-bottom: 0em;
}
ol ul {
list-style: disc;
margin-top: .6em;
}
ul ul {
list-style: disc;
}
li {
margin-bottom: .7em;
margin-left: -2em;
}
/* TERM AND DEFINITION TAGS */
dl {
margin-top: 0em;
}
dt {
font-weight: bold;
margin-top: 1em;
/* margin-left: 0em; */ /* for SMS terms */
margin-left: 1.5em;
}
dd {
margin-bottom: 0em;
/*not currently working*/
margin-left: 1.5em;
}
dl li {
margin-bottom: .7em;
} /*list item inside a term/def list*/
dl dl {
margin-top: 0em;
margin-left: 0em;
} /*term/def list inside a term/def list*/
/* TABLE TAGS */
table {
font-size: 100%;
margin-top: 1em;
margin-bottom: 1em;
}
th {
text-align: left;
vertical-align: bottom;
background: #dddddd;
}
th.center {
text-align: center;
}
tr {
vertical-align: top;
}
td {
/* not used for K2 */
vertical-align: top;
background: #eeeeee;
}
/* MISC. TAGS */
pre {
font-family: Courier;
font-size: 125%;
margin-top: 1.2em;
margin-bottom: 1.5em;
}
code {
font-family: Courier;
font-size: 125%;
}
pre code {
font-size: 100%;
}
hr.sms {
/* SMS specific rule used under procedure title */
color: black;
text-align: left;
}
hr.iis {
/* IIS specific - preceding copyright */
color: black;
}

34
static/html/jspaint/help/default.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to Help</title>
<link href="nobgcolor.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="background-animation"></div>
<hr id="os-logo-colorbar">
<div id="foreground-contents">
<a href="https://98.js.org/" target="_blank" id="os-logo-link">
<img src="../images/98.js.org.svg" alt="98.js.org" id="os-logo" height="100">
</a>
<br>
<p><font size="2"><b>Welcome to Help</b></font></p>
<p>Use the Help system to learn more about <a href="https://98.js.org/" target="_blank">98.js.org</a> and JS Paint.</p>
<ul>
<li>Find answers to your questions.</li>
<li><strike>Browse the online version of the <i>Getting Started</i> book.</strike></li>
<li><strike>Connect to the Web to get software updates.</strike></li>
<li><strike>Troubleshoot your system.</strike></li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<p><a href="memcopy.html">Original documentation © 1998 Microsoft Corporation, all rights reserved.</a></p>
</div>
<script src="vaporwave.js"></script>
</body>
</html>

BIN
static/html/jspaint/help/flag&clouds.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

17
static/html/jspaint/help/memcopy.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>Legal Information</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<h1 id="LegalInformation">Legal Information</h1>
<p><strong>Microsoft Windows 98</strong></p>
<p>Information in this document is subject to change without notice. The names of companies, products, people, characters, and/or data mentioned herein are fictitious and are in no way intended to represent any real individual, company, product, or event, unless otherwise noted. Complying with all applicable copyright laws is the responsibility of the user. No part of this document may be reproduced or transmitted in any form or by any means, electronic or mechanical, for any purpose, without the express written permission of Microsoft Corporation.</p>
<p>Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual property rights covering subject matter in this document. Except as expressly provided in any written license agreement from Microsoft, the furnishing of this document does not give you any license to these patents, trademarks, copyrights, or other intellectual property.</p>
<p>© 1998 Microsoft Corporation. All rights reserved.</p>
<p>Microsoft, ActiveX, BackOffice, MS, MS-DOS, MSN, Windows, and Windows&#160;NT are either registered trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries.</p>
<p>Other product and company names mentioned herein may be the trademarks of their respective owners.</p>
</body>
</html>

189
static/html/jspaint/help/mspaint.hhc Normal file
View File

@@ -0,0 +1,189 @@
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<meta name="GENERATOR" content="Microsoft&reg; HTML Help Workshop 4.00">
<!-- Sitemap 1.0 -->
</HEAD><BODY>
<OBJECT type="text/site properties">
<param name="Window Styles" value="0x800624">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Drawing Lines and Shapes">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Draw a straight line ">
<param name="Local" value="paint_lines.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Draw a free-form line ">
<param name="Local" value="paint_freeform_lines.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Draw a curved line">
<param name="Local" value="paint_curves.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Draw an ellipse or circle ">
<param name="Local" value="paint_ovals.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Draw a rectangle or square ">
<param name="Local" value="paint_rectangles.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Draw a polygon ">
<param name="Local" value="paint_polygons.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Putting Text in Pictures">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Type and format text ">
<param name="Local" value="paint_text.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Working with Color">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Set the default foreground and background colors">
<param name="Local" value="paint_set_default_colors.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Fill an area with color ">
<param name="Local" value="paint_fill.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Paint with a brush ">
<param name="Local" value="paint_brush.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Create an airbrush effect ">
<param name="Local" value="paint_airbrush.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Create custom colors ">
<param name="Local" value="paint_custom_colors.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Use black and white instead of color ">
<param name="Local" value="paint_blackwhite.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Invert all the colors in a picture ">
<param name="Local" value="paint_invert.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Change the color of an existing line ">
<param name="Local" value="paint_change_color.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Copy color from one area or object to another ">
<param name="Local" value="paint_not_in_color_box.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Erasing">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Erase a small area">
<param name="Local" value="paint_erase_small.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Erase a large area">
<param name="Local" value="paint_erase_large.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Erase an entire image">
<param name="Local" value="paint_clear_image.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Undo changes ">
<param name="Local" value="paint_undo.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Working with Part of the Picture">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Select part of a picture ">
<param name="Local" value="paint_cutout_select.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Copy and paste part of a picture">
<param name="Local" value="paint_cutout_copy_move.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Save part of a picture into a bitmap file ">
<param name="Local" value="paint_cutout_save.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Changing How Your Picture Looks on the Screen">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Change the size of your picture">
<param name="Local" value="paint_change_size.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Zoom in or out ">
<param name="Local" value="paint_zoom.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Enlarge the size of the viewing area">
<param name="Local" value="paint_enlarge_area.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Display gridlines ">
<param name="Local" value="paint_grid.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Flip or rotate a picture ">
<param name="Local" value="paint_flip_picture.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Stretch or skew an item">
<param name="Local" value="paint_skew_picture.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Printing">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Print a picture ">
<param name="Local" value="paint_print.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Using Paint with Other Programs">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Insert a bitmap file into the current picture">
<param name="Local" value="paint_insert_file.html">
</OBJECT>
</UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Tips and Tricks">
</OBJECT>
<UL>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Use a picture as your desktop background ">
<param name="Local" value="paint_wallpaper.html">
</OBJECT>
<LI> <OBJECT type="text/sitemap">
<param name="Name" value="Display the tool box">
<param name="Local" value="paint_toolbox.html">
</OBJECT>
</UL>
</UL>
</BODY></HTML>

1553
static/html/jspaint/help/mspaint.hhk Normal file
View File

File diff suppressed because it is too large Load Diff

290
static/html/jspaint/help/nobgcolor.css Normal file
View File

@@ -0,0 +1,290 @@
/* Originally: Cascading Style Sheet for IE4 build 1008+ */
/* for scrollbars and selection color */
@import "../lib/os-gui/windows-98.css";
body {
font-size: 70%;
font-family: Verdana, Arial, Helvetica, "MS Sans Serif";
}
html,
body {
margin: 0;
height: 100%;
}
#background-animation {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
#foreground-contents {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin-left: 35px;
margin-top: 10px;
overflow: auto;
}
#os-logo-link {
text-decoration: none;
}
#os-logo-colorbar {
position: absolute;
left: 0;
right: 0;
top: 79px;
pointer-events: none;
border: 0;
height: 1px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3100+0,ff3100+14,f7df1e+14,f7df1e+29,63ce30+29,63ce30+43,009cff+43,009cff+43 */
background: #ff3100; /* Old browsers */
background: -moz-linear-gradient(left, #ff3100 0%, #ff3100 14%, #f7df1e 14%, #f7df1e 29%, #63ce30 29%, #63ce30 43%, #009cff 43%, #009cff 43%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ff3100 0%,#ff3100 14%,#f7df1e 14%,#f7df1e 29%,#63ce30 29%,#63ce30 43%,#009cff 43%,#009cff 43%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ff3100 0%,#ff3100 14%,#f7df1e 14%,#f7df1e 29%,#63ce30 29%,#63ce30 43%,#009cff 43%,#009cff 43%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3100', endColorstr='#009cff',GradientType=1 ); /* IE6-9 */
}
a:link {
color: #0000CC;
}
a:active {
color: #996699;
}
a:visited {
color: #996699;
}
h1 {
font-size: 145%;
margin-bottom: .5em;
}
h2 {
font-size: 125%;
margin-top: 1.5em;
margin-bottom: .5em;
}
h3 {
font-size: 110%;
margin-top: 1.2em;
margin-bottom: .5em;
}
h4 {
font-size: 105%;
}
h5 {
font-size: 100%;
}
p.proclabel {
font-weight: bold;
font-size: 100%;
}
p {
margin-top: .6em;
margin-bottom: .6em;
}
li p {
margin-top: 0;
margin-bottom: .6em;
}
ol {
margin-top: .5em;
margin-bottom: 0em;
margin-left: 4em;
}
ul {
margin-top: .6em;
margin-bottom: 0em;
}
ol ul {
list-style: disc;
margin-top: 2em;
}
li {
padding-bottom: .7em;
margin-left: -2em;
}
dl ul {
/* list item inside a def/term */
margin-top: 2em;
margin-bottom: 0em;
}
dl {
margin-top: -1em;
}
ol dl {
/* term/def list inside a numbered list */
margin-top: -1.5em;
margin-left: 0em;
}
ol dl dl {
/* term/def list inside a term/def list */
margin-top: 0em;
margin-left: .2em;
}
dd {
margin-bottom: 0em;
/* not currently working */
margin-left: 1.5em;
}
dt {
padding-top: 2em;
font-weight: bold;
margin-left: 1.5em;
}
pre {
margin-top: 0em;
margin-bottom: 1.5em;
font-family: Courier;
font-size: 125%;
}
table {
font-size: 100%;
margin-top: 1em;
margin-bottom: 1em;
}
th.center {
text-align: center;
}
th {
text-align: left;
background: #dddddd;
margin: 3pt;
vertical-align: bottom;
}
tr {
vertical-align: top;
}
td {
margin: 3pt;
vertical-align: top;
}
/* MISC. TAGS */
hr.sms {
/* SMS specific rule used under procedure title */
color: red;
text-align: left;
}
hr.iis {
color: red;
}
/*IIS specific - preceding copyright*/
/* IE 4.0 TAGS */
/*
a:visited {
color: #0000FF;
}
*/
p.dis {
font-size: 6pt;
}
ul.onestep {
list-style: square;
}
h5 {
}
h5.active {
background: #000000;
color: #FFCC99;
}
/* -- subheading -- */
h5.subh {
color: #660000;
margin-bottom: -1em;
margin-top: 1.5em;
}
/* -- procedure heading -- */
h5.proch {
margin-bottom: 4pt;
color: #003399;
}
/* -- topic heading -- */
h5.topich {
color: #FF0033;
margin-bottom: -1em;
}
/* -- note 'n' tip heading -- */
h5.note {
margin-top: 2em;
margin-bottom: -1em;
color: #99CC99;
}
/* -- related topics heading -- */
h5.relh {
margin-top: 2.25em;
margin-bottom: -1em;
color: #9933CC;
}
/* -------------- miscellany 'n' stuff -------------- */
/* intended to applied with <div></div> tags to groups of links */
.dectree {
margin-left: 1.33em;
margin-top: 1.5em;
}
div.dectree p {
margin-top: 1em;
color: orange;
}
div.dectree p:first-letter {
font-size: 3em;
color: orange;
}
a:link .dectree p {
color: yellow;
}
.reltopics {
line-height: .5em;
margin-top: 2em;
}
div.reltopics p {
margin-top: 1em;
}

BIN
static/html/jspaint/help/onestep.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 815 B

36
static/html/jspaint/help/online_support.htm Normal file
View File

@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Technical Support Online</title>
<link href="nobgcolor.css" rel="stylesheet" type="text/css">
</head>
<body style="margin-left: 35px; margin-top: 80px;">
<div id="background-animation"></div>
<hr id="os-logo-colorbar">
<div id="foreground-contents">
<a href="https://98.js.org/" target="_blank" id="os-logo-link">
<img src="../images/98.js.org.svg" alt="98.js.org" id="os-logo" height="100">
</a>
<br>
<p><a id="windows_update" name="windows_update"></a><b><i>Additional help via the Internet</i></b></p>
If you have a technical question on a 98.js.org product and can't find your answer in the product Help file or manual, take advantage of one of these online resources:
<p></p>
<ul>
<li>
Your primary source for support is the computer manufacturer who provided your software.
Your computer manufacturer may provide a web site to help you find answers to technical questions.
Check the documentation that came with your computer to determine the availability of an online support site.
</li>
<li>
For the latest technical information on 98.js.org products, you can also find answers at GitHub.
From README articles in the repositories, to Troubleshooting <small>that there aren't any</small> Wizards,
the repositories on GitHub have the specific resources most likely to help you find the answer to your question.
To begin your search, go to <a href="https://github.com/1j01/98" target="_blank">Support Online</a>.
</li>
</ul>
<p></p>
</div>
<script src="vaporwave.js"></script>
</body>
</html>

BIN
static/html/jspaint/help/p_airb.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 867 B

BIN
static/html/jspaint/help/p_blank.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 B

BIN
static/html/jspaint/help/p_brush.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 852 B

BIN
static/html/jspaint/help/p_color.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 B

BIN
static/html/jspaint/help/p_curve.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 835 B

BIN
static/html/jspaint/help/p_cut.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 158 B

BIN
static/html/jspaint/help/p_database.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 141 B

BIN
static/html/jspaint/help/p_delete.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 B

BIN
static/html/jspaint/help/p_erase.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 857 B

BIN
static/html/jspaint/help/p_eye.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 853 B

BIN
static/html/jspaint/help/p_fliph.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 163 B

BIN
static/html/jspaint/help/p_flipv.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 155 B

BIN
static/html/jspaint/help/p_free.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 846 B

BIN
static/html/jspaint/help/p_invert.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 139 B

BIN
static/html/jspaint/help/p_line.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 833 B

BIN
static/html/jspaint/help/p_make_opaque.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 B

BIN
static/html/jspaint/help/p_monochrome.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 B

BIN
static/html/jspaint/help/p_opaq.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 989 B

BIN
static/html/jspaint/help/p_open.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 B

BIN
static/html/jspaint/help/p_oval.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 843 B

BIN
static/html/jspaint/help/p_paint.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 865 B

BIN
static/html/jspaint/help/p_paste.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 B

BIN
static/html/jspaint/help/p_pencil.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 B

BIN
static/html/jspaint/help/p_poly.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 840 B

BIN
static/html/jspaint/help/p_rect.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 840 B

BIN
static/html/jspaint/help/p_rotate_ccw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 B

BIN
static/html/jspaint/help/p_rotate_ccw_thin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 151 B

BIN
static/html/jspaint/help/p_rotate_cw.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 B

BIN
static/html/jspaint/help/p_rotate_cw_thin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 148 B

BIN
static/html/jspaint/help/p_rrect.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 B

BIN
static/html/jspaint/help/p_save.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
static/html/jspaint/help/p_sel.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 837 B

BIN
static/html/jspaint/help/p_skew_h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 175 B

BIN
static/html/jspaint/help/p_skew_v.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 B

BIN
static/html/jspaint/help/p_stretch_both.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 B

BIN
static/html/jspaint/help/p_stretch_h.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

BIN
static/html/jspaint/help/p_stretch_v.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 162 B

BIN
static/html/jspaint/help/p_trans.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 978 B

BIN
static/html/jspaint/help/p_txt.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 848 B

BIN
static/html/jspaint/help/p_zoom.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 B

21
static/html/jspaint/help/paint_airbrush.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To create an airbrush effect</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_airbrush"><b>To create an airbrush effect</b></p>
<ol>
<li>In the toolbox, click <img alt="the spray paint can" src="p_airb.gif">.</li>
<li>At the bottom of the toolbox, click a spray size.</li>
<li>To spray, drag the pointer.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. You can draw with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can draw with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
</body>
</html>

26
static/html/jspaint/help/paint_blackwhite.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To use black and white instead of color</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_blackwhite"><b>To use black and white instead of color</b></p>
<ol>
<li>On the <b>Image</b> menu, click <b>Attributes</b>.</li>
<li>Click <b>Black and white</b>.</li>
</ol>
<!--
There's now a conversion to monochrome
(altho the black and white mode allows color in the document.)
@TODO: Update this help accordingly
-->
<!--
<p><b>Note</b></p>
<ul>
<li>If you change back to color, only new work will be in color.</li>
</ul>
-->
</body>
</html>

21
static/html/jspaint/help/paint_brush.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To paint with a brush</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_brush"><b>To paint with a brush</b></p>
<ol>
<li>In the toolbox, click <img alt="the brush" src="p_brush.gif">.</li>
<li>At the bottom of the toolbox, click a brush shape.</li>
<li>To paint, drag the pointer.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. You can paint with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can paint with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
</body>
</html>

29
static/html/jspaint/help/paint_change_color.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To change the color of an existing line</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_change_color"><b>To change the color of an existing line</b></p>
<ol>
<li>In the toolbox, click <img alt="the inkwell" src="p_paint.gif">.</li>
<li>In the color box, click a different color.</li>
<li>Position the pointer so that it is touching the line you want to change, and then click.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>If the line is part of a shape, any connecting vertical and horizontal lines will also change to the new color.</li>
<li>To make sure you change only the line color and not the surrounding area, you can zoom the picture to a larger size.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_zoom">
</object></p>
</body>
</html>

22
static/html/jspaint/help/paint_change_size.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To change the size of your picture</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_change_size"><b>To change the size of your picture</b></p>
<ol>
<li>On the <b>Image</b> menu, click <b>Attributes</b>.</li>
<li>Click the unit of measurement you want to use for the width and height.</li>
<li>Type the measurements in <b>Width</b> and <b>Height</b>.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>You can also resize your picture by dragging the three image resize handles, located at the bottom right corner and along the bottom and right sides of your picture.</li>
<li>If your current picture is bigger than the new size, the picture is cut from the right side and bottom to fit within the smaller area. If your current picture is smaller than the new size, the extra area is filled with the selected background color.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
</body>
</html>

27
static/html/jspaint/help/paint_clear_image.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To clear an entire image</title>
<meta content="a_paint_clear_image">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_clear_image"><b>To clear an entire image</b></p>
<ol>
<li>If any part of the image is selected, click outside of the selected area.</li>
<li>On the <b>Image</b> menu, click <b>Clear Image</b>.</li>
</ol>
<p><b>Note</b></p>
<ul>
<li>The current <a data-topic-id="gl_pbrush_back">background color</a> will be used to fill the cleared area. You can choose a different background color by right-clicking a color in the color box.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_erase_small;a_paint_erase_large;a_paint_undo">
</object></p>
</body>
</html>

16
static/html/jspaint/help/paint_color_box.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To show or hide the color box</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_color_box"><b>To show or hide the color box</b></p>
<p><img src="onestep.gif"> To show the color box, on the <b>View</b> menu, make sure a check mark appears next to <b>Color Box</b>. To hide the color box, click to clear the check mark.</p>
<p><b>Note</b></p>
<ul>
<li>You can drag the color box to any location in the window.</li>
</ul>
</body>
</html>

23
static/html/jspaint/help/paint_curves.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To draw a curve</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_curves"><b>To draw a curve</b></p>
<ol>
<li>In the toolbox, click <img alt="the 's' line" src="p_curve.gif">.</li>
<li>At the bottom of the toolbox, click a line width.</li>
<li>Draw a straight line by dragging the pointer.</li>
<li>Click where you want one arc of the curve to be, and then drag the pointer to adjust the curve. Repeat this step for a second arc.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. You can paint with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can paint with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>Each curve must have at least one arc but no more than two.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
</body>
</html>

22
static/html/jspaint/help/paint_custom_colors.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To create custom colors</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_custom_colors"><b>To create custom colors</b></p>
<ol>
<li>In the color box, click the color you want to change.</li>
<li>On the <b>Colors</b> menu, click <b>Edit Colors</b>.</li>
<li>Click <b>Define Custom Colors</b>.</li>
<li>Click the color swatch to change the <b>Hue</b> and saturation (<b>Sat</b>), and then move the slider in the color gradient to change the luminescence (<b>Lum</b>).</li>
<li>Click <b>Add to Custom Colors</b>, and then click <b>OK</b>.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>You can also double click on a color in the color box to edit.</li>
</ul>
</body>
</html>

31
static/html/jspaint/help/paint_cutout_copy_move.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To copy and paste part of a picture</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_cutout_copy_move"><b>To copy and paste part of a picture</b></p>
<ol>
<li>In the toolbox, click <img alt="the rectangular selection tool" src="p_sel.gif"> to select a rectangular area or click <img alt="the free form selection tool" src="p_free.gif"> to select a free-form area.</li>
<li>Drag the pointer to define the area you want to copy.</li>
<li>Select a method of pasting:
<ul>
<li>Click <img alt="opaque image button" src="p_opaq.gif"> to paste <a data-topic-id="GL_PBRUSH_OPAQUE_DEF">opaquely.</a></li>
<li>Click <img alt="transparent image button" src="p_trans.gif"> to paste <a data-topic-id="GL_PBRUSH_TRANSPARENT_DEF">transparently.</a></li>
</ul>
</li>
<li>On the <b>Edit</b> menu, click <b>Copy</b>.</li>
<li>On the <b>Edit</b> menu, click <b>Paste</b>.</li>
<li>Drag the selection where you want it.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>You cannot paste graphics when the text tool is selected.</li>
<li>You can paste multiple copies of an object by holding down <small>CTRL</small> while you drag the pasted object to a new location. Repeat as needed.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
<li>You can remove the selection box by clicking outside the box.</li>
</ul>
</body>
</html>

17
static/html/jspaint/help/paint_cutout_save.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To save part of a picture into another bitmap file</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_cutout_save"><b>To save part of a picture into another bitmap file</b></p>
<ol>
<li>In the toolbox, click <img alt="the rectangular selection tool" src="p_sel.gif"> to select a rectangular area or click <img alt="the free form selection tool" src="p_free.gif"> to select a free-form area.</li>
<li>Drag the pointer to define the area you want to save.</li>
<li>On the <b>Edit</b> menu, click <b>Copy To</b>.</li>
<li>Specify a folder and a file name, and then click <b>Save</b>.</li>
</ol>
</body>
</html>

18
static/html/jspaint/help/paint_cutout_select.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To select part of a picture</title>
<meta content="a_paint_cutout_select">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_cutout_select"><b>To select part of a picture</b></p>
<p><img src="onestep.gif"> In the toolbox, click <img alt="the rectangular selection tool" src="p_sel.gif"> to select a rectangular area, and then drag the pointer diagonally across the area.</p>
<p>Or, click <img alt="the free form selection tool" src="p_free.gif"> to select a free-form area, and then drag the pointer around the area.</p>
<p><b>Note</b></p>
<ul>
<li>You can remove the selection box by clicking outside the box.</li>
</ul>
</body>
</html>

26
static/html/jspaint/help/paint_enlarge_area.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To enlarge the size of the viewing area</title>
<meta content="a_paint_enlarge_area">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_enlarge_area"><b>To enlarge the size of the viewing area</b></p>
<p><img src="onestep.gif"> On the <b>View</b> menu, click <b>View Bitmap</b>.</p>
<p>Your picture fills the entire viewing area. You can return to your former view by clicking anywhere in the picture.</p>
<p><b>Notes</b></p>
<ul>
<li><s>You cannot make changes to a picture in this view.</s></li>
<li>You can also enlarge the size of the viewing area by hiding the toolbox, color box, or status bar. You do this by clearing their check marks on the <b>View</b> menu.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_zoom">
</object></p>
</body>
</html>

28
static/html/jspaint/help/paint_erase_large.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To erase a large area</title>
<meta content="a_paint_erase_large">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_erase_large"><b>To erase a large area</b></p>
<ol>
<li>In the toolbox, click <img alt="the rectangular selection tool" src="p_sel.gif"> to select a rectangular area or click <img alt="the free form selection tool" src="p_free.gif"> to select a free-form area.</li>
<li>Drag the pointer to select the area you want to erase.</li>
<li>On the <b>Edit</b> menu, click <b>Clear Selection</b>.</li>
</ol>
<p><b>Note</b></p>
<ul>
<li>The current <a data-topic-id="gl_pbrush_back">background color</a> will be used to fill the cleared area. You can choose a different background color by right-clicking a color in the color box.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_erase_small;a_paint_clear_image;a_paint_undo;a_paint_not_in_color_box">
</object></p>
</body>
</html>

30
static/html/jspaint/help/paint_erase_small.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To erase a small area</title>
<meta content="a_paint_erase_small">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_erase_small"><b>To erase a small area</b></p>
<ol>
<li>In the toolbox, click <img alt="the eraser tool" src="p_erase.gif">.</li>
<li>At the bottom of the toolbox, click an eraser shape.</li>
<li>Drag the pointer over the area you want to erase.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The selected <a data-topic-id="gl_pbrush_back">background color</a> shows what color the eraser will leave behind. You can change the background color by right-clicking another color in the color box.</li>
<li>You can change a specific color (and nothing else) by changing the <a data-topic-id="gl_pbrush_fore">foreground color</a> to the color you want to erase and the background color to the color you want to replace it with. Then, when you click the eraser, you can right-click to change the color.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_erase_large;a_paint_clear_image;a_paint_undo;a_paint_not_in_color_box">
</object></p>
</body>
</html>

21
static/html/jspaint/help/paint_fill.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To fill an area or object with color</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_fill"><b>To fill an area or object with color</b></p>
<ol>
<li>In the toolbox, click <img alt="the inkwell" src="p_paint.gif">.</li>
<li>Click the area or object you want to fill.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>If the shape being filled has any breaks in its border, the filling color leaks through to the rest of the drawing area. You can find and close any openings by clicking the <b>View</b> menu, pointing to <b>Zoom</b>, and then clicking <b>Large Size</b> or <b>Custom</b>.</li>
<li>The default background and foreground colors appear at the left in the color box. You can fill with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can fill with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
</body>
</html>

34
static/html/jspaint/help/paint_flip_picture.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To flip or rotate a picture or object</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_flip_picture"><b>To flip or rotate a picture or object</b></p>
<ol>
<li>In the toolbox, click <img alt="the rectangular selection tool" src="p_sel.gif"> to select a rectangular area or click <img alt="the free form selection tool" src="p_free.gif"> to select a free-form area.</li>
<li>Drag a box around the item you want to flip or rotate.</li>
<li>At the bottom of the toolbox, select one of the following:
<ul>
<li>Click <img alt="opaque image button" src="p_opaq.gif"> to flip or rotate <a data-topic-id="GL_PBRUSH_OPAQUE_DEF">opaquely.</a></li>
<li>Click <img alt="transparent image button" src="p_trans.gif"> to flip or rotate <a data-topic-id="GL_PBRUSH_TRANSPARENT_DEF">transparently.</a></li>
</ul>
</li>
<li>On the <b>Image</b> menu, click <b>Flip/Rotate</b>.</li>
<li>Click the option you want.</li>
</ol>
<p><b>Note</b></p>
<ul>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_cutout_select">
</object></p>
</body>
</html>

20
static/html/jspaint/help/paint_freeform_lines.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To draw a free-form line</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_freeform_lines"><b>To draw a free-form line</b></p>
<ol>
<li>In the toolbox, click <img alt="the pencil" src="p_pencil.gif">.</li>
<li>To draw the line, drag the pointer.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. You can draw with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can draw with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
</body>
</html>

20
static/html/jspaint/help/paint_grid.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To display gridlines</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_grid"><b>To display gridlines</b></p>
<ol>
<li>On the <b>View</b> menu, point to <b>Zoom</b>, and then click <b>Custom</b>.</li>
<li>Under <b>Zoom to</b>, click <b>400%</b>, <b>600%</b>, or <b>800%</b>, and then click <b>OK</b>.</li>
<li>On the <b>View</b> menu, point to <b>Zoom</b>, and then click <b>Show Grid</b>.</li>
</ol>
<p><b>Note</b></p>
<ul>
<li>You can remove the gridlines by repeating step 3 and clearing the <b>Show Grid</b> check mark, or by clicking <b>View</b>, pointing to <b>Zoom</b>, and then clicking <b>Normal Size</b>.</li>
</ul>
</body>
</html>

17
static/html/jspaint/help/paint_insert_file.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To insert a bitmap into the current picture</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_insert_file"><b>To insert a bitmap into the current picture</b></p>
<ol>
<li>In the toolbox, click <img alt="the rectangular selection tool" src="p_sel.gif"> and then drag the pointer to define an area to put the bitmap in.</li>
<li>On the <b>Edit</b> menu, click <b>Paste From</b>.</li>
<li>Locate and double-click the bitmap file you want to insert.</li>
<li>Drag the bitmap where you want it, and then click outside the selection.</li>
</ol>
</body>
</html>

16
static/html/jspaint/help/paint_invert.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To invert all the colors in a picture</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_invert"><b>To invert all the colors in a picture</b></p>
<p><img src="onestep.gif"> On the <b>Image</b> menu, click <b>Invert Colors</b>.</p>
<p><b>Note</b></p>
<ul>
<li>Each color is replaced by its color complement. For example, red becomes cyan, and blue becomes yellow.</li>
</ul>
</body>
</html>

21
static/html/jspaint/help/paint_lines.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To draw a straight line</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_lines"><b>To draw a straight line</b></p>
<ol>
<li>In the toolbox, click <img alt="the diagonal line tool" src="p_line.gif">.</li>
<li>At the bottom of the toolbox, click a line width.</li>
<li>To draw the line, drag the pointer.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. You can draw with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can draw with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can draw a perfectly horizontal, vertical, or 45-degree diagonal line by holding down <small>SHIFT</small> while dragging.</li>
</ul>
</body>
</html>

29
static/html/jspaint/help/paint_not_in_color_box.html Normal file
View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To copy color from one area or object to another</title>
<meta content="a_paint_not_in_color_box">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_not_in_color_box"><b>To copy color from one area or object to another</b></p>
<ol>
<li>In the toolbox, click <img alt="the eyedropper tool" src="p_eye.gif">.</li>
<li>Click the object whose color you want to copy.</li>
<li>In the toolbox, click <img alt="the inkwell" src="p_paint.gif">.</li>
<li>Click the object or area where you want the new color.</li>
</ol>
<p><b>Note</b></p>
<ul>
<li>To use a color as a <a data-topic-id="gl_pbrush_back">background color,</a> or to erase with a color that isn't in the color box, right-click the color in your picture.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_erase_small;a_paint_erase_large">
</object></p>
</body>
</html>

23
static/html/jspaint/help/paint_ovals.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To draw an ellipse or circle</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_ovals"><b>To draw an ellipse or circle</b></p>
<ol>
<li>In the toolbox, click <img alt="the oval tool" src="p_oval.gif">.</li>
<li>Drag the pointer diagonally.
<p>You can draw a perfect circle by holding down <small>SHIFT</small> while you drag.</p>
</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>You can create a colored fill by clicking a fill style at the bottom of the toolbox. Click a new color in the color box to change the line color, or right-click a new color to change the fill color.</li>
<li>The default background and foreground colors appear at the left in the color box. You can draw with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can draw with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
</body>
</html>

23
static/html/jspaint/help/paint_polygons.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To draw a polygon</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_polygons"><b>To draw a polygon</b></p>
<ol>
<li>In the toolbox, click <img alt="the polygon tool" src="p_poly.gif">.</li>
<li>To draw the polygon, drag the pointer and click at each corner, and then double-click when done.
<p>To use only 45- and 90-degree angles, hold down <small>SHIFT</small> while dragging.</p>
</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. You can draw with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can draw with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
<li>You can create a colored fill by clicking a fill style at the bottom of the toolbox.</li>
</ul>
</body>
</html>

17
static/html/jspaint/help/paint_print.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To print a picture</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_print"><b>To print a picture</b></p>
<p><img src="onestep.gif"> On the <b>File</b> menu, click <b>Print</b>.</p>
<p><b>Notes</b></p>
<ul>
<li>You can see how the printed picture will look before you print by clicking the <b>File</b> menu and then clicking <b>Print Preview</b>.</li>
<li>You can set margins or change orientation by clicking the <b>File</b> menu and then clicking <b>Page Setup</b>.</li>
</ul>
</body>
</html>

22
static/html/jspaint/help/paint_rectangles.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To draw a rectangle or square</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_rectangles"><b>To draw a rectangle or square</b></p>
<ol>
<li>In the toolbox, click <img alt="the rectangle tool" src="p_rect.gif"> to create a square-cornered shape, or click <img alt="the round corner box tool" src="p_rrect.gif"> to create a round-cornered shape.</li>
<li>To draw a rectangle, drag the pointer diagonally in the direction you want.</li>
<li>To draw a square, hold down <small>SHIFT</small> while dragging the pointer.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. You can draw with the <a data-topic-id="gl_pbrush_fore">foreground color</a> by clicking, or you can draw with the <a data-topic-id="gl_pbrush_back">background color</a> by right-clicking.</li>
<li>You can create a colored fill by clicking a fill style at the bottom of the toolbox.</li>
<li>The border width of the box is the same as the thickness selected for the line tools. To change the border thickness, click the line or curve tool in the toolbox, and then click the thickness you want in the box below the toolbox.</li>
</ul>
</body>
</html>

19
static/html/jspaint/help/paint_set_default_colors.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To set the default foreground and background colors</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_set_default_colors"><b>To set the default foreground and background colors</b></p>
<ul>
<li>To set the <a data-topic-id="gl_pbrush_fore">foreground color,</a> click a color in the color box.</li>
<li>To set the <a data-topic-id="gl_pbrush_back">background color,</a> right-click a color in the color box.</li>
</ul>
<p><b>Note</b></p>
<ul>
<li>The default background and foreground colors appear at the left in the color box. The top color chip represents the foreground color. The bottom color chip represents the background color.</li>
</ul>
</body>
</html>

34
static/html/jspaint/help/paint_skew_picture.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To stretch or skew an item</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_skew_picture"><b>To stretch or skew an item</b></p>
<ol>
<li>In the toolbox, click <img alt="the rectangular selection tool" src="p_sel.gif"> to select a rectangular area or click <img alt="the free form selection tool" src="p_free.gif"> to select a free-form area.</li>
<li>Drag a box around the item you want to change.</li>
<li>On the <b>Image</b> menu, click <b>Stretch/Skew</b>.</li>
<li>Click the stretching or skewing option you want, and then enter the amount.</li>
<li>At the bottom of the toolbox, select one of the following:
<ul>
<li>Click <img alt="opaque image button" src="p_opaq.gif"> to stretch or skew <a data-topic-id="GL_PBRUSH_OPAQUE_DEF">opaquely.</a></li>
<li>Click <img alt="transparent image button" src="p_trans.gif"> to stretch or skew <a data-topic-id="GL_PBRUSH_TRANSPARENT_DEF">transparently.</a></li>
</ul>
</li>
</ol>
<p><b>Note</b></p>
<ul>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_cutout_select">
</object></p>
</body>
</html>

38
static/html/jspaint/help/paint_text.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To type and format text</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_text"><b>To type and format text</b></p>
<ol>
<li>In the toolbox, click <img alt="the 'A' button" src="p_txt.gif">.</li>
<li>To create a text frame, drag the pointer diagonally to the size you want.</li>
<li>On the text toolbar, click the font, size, and style you want for the text.</li>
<li>Click inside the text frame, type the text, and then do any of the following as needed.
<ul>
<li>Move or enlarge the text frame.</li>
<li>Click a color to change the color of the text.</li>
<li>Click <img alt="opaque image button" src="p_opaq.gif"> in the toolbox to insert the text on a colored background. Then right-click in the color box to change the background color.</li>
</ul>
</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>You can view the text toolbar by clicking the <b>View</b> menu and then clicking <b>Text Toolbar</b>. If it obscures part of the <b>Paint</b> window, you can drag the toolbar to any location in the window.</li>
<li><s>You can enter text into a picture only in Normal view.</s></li>
<li>You can insert text into the picture by clicking outside the text frame.</li>
<li>When the text tool is selected, you can paste text only. You cannot paste graphics.</li>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_zoom">
</object></p>
</body>
</html>

16
static/html/jspaint/help/paint_toolbox.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To show or hide the toolbox</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_toolbox"><b>To show or hide the toolbox</b></p>
<p><img src="onestep.gif"> To show the toolbox, click the <b>View</b> menu and make sure a check mark appears next to <b>Tool Box</b>. To hide the toolbox, click to clear the check mark.</p>
<p><b>Note</b></p>
<ul>
<li>You can drag the toolbox to any location in the window.</li>
</ul>
</body>
</html>

12
static/html/jspaint/help/paint_trans_opaque.html Normal file
View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To specify transparent or opaque drawing</title>
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_trans_opaque"><b>To specify transparent or opaque drawing</b></p>
<p><img src="onestep.gif"> To specify <a data-topic-id="GL_PBRUSH_TRANSPARENT_DEF">transparent</a> drawing, on the <b>Image</b> menu, click to clear the check mark next to <b>Draw Opaque</b>. To specify <a data-topic-id="GL_PBRUSH_OPAQUE_DEF">opaque</a> drawing, make sure a check mark appears next to <b>Draw Opaque</b>.</p>
</body>
</html>

24
static/html/jspaint/help/paint_undo.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To undo changes</title>
<meta content="a_paint_undo">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_undo"><b>To undo changes</b></p>
<p><img src="onestep.gif"> On the <b>Edit</b> menu, click <b>Undo</b>.</p>
<p><b>Note</b></p>
<ul>
<li>You can undo any number of changes by clicking the <b>Edit</b> menu and then clicking <b>Undo</b> for each change.</li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_erase_small;a_paint_erase_large;a_paint_not_in_color_box">
</object></p>
</body>
</html>

38
static/html/jspaint/help/paint_wallpaper.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To use a picture as the desktop background</title>
<meta content="win_paint_to_wallpaper">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_wallpaper"><b>To use a picture as the desktop background</b></p>
<!-- <ol>
<li>Save the picture.</li>
<li>On the <b>File</b> menu, click either of the following commands:
<ul>
<li><b>Set As Wallpaper (Tiled)</b> covers the screen with repetitions of your picture.</li>
<li><b>Set As Wallpaper (Centered)</b> places your picture in the center of the screen.</li>
</ul>
</li>
</ol> -->
<ol>
<li>On the <b>File</b> menu, click either of the following commands:
<ul>
<li><b>Set As Wallpaper (Tiled)</b> covers the screen with repetitions of your picture.</li>
<li><b>Set As Wallpaper (Centered)</b> places your picture in the center of the screen.</li>
</ul>
</li>
<li>Save the picture.</li>
<li>Go into your system settings to choose the wallpaper.</li>
</ol>
<p><b>Notes</b></p>
<ul>
<li>JS Paint can't directly set your wallpaper, but it can generate a tiled image the size of your desktop.</li>
<!-- @TODO: make this note unnecessary? -->
<li>The <b>Set As Wallpaper (Centered)</b> option doesn't currently use your desktop size, it just saves a copy of the image.
You need to make sure in your system settings to choose to center the image.</li>
</ul>
</body>
</html>

24
static/html/jspaint/help/paint_zoom.html Normal file
View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<title>To zoom in or out of a picture</title>
<meta content="a_paint_zoom">
<link href="coUA.css" rel="stylesheet" type="text/css">
</head>
<body>
<p id="paint_zoom"><b>To zoom in or out of a picture</b></p>
<p><img src="onestep.gif"> On the <b>View</b> menu, point to <b>Zoom</b>, and then click <b>Normal Size</b>, <b>Large Size</b>, or <b>Custom</b>.</p>
<p><b>Note</b></p>
<ul>
<li><s>You can enter text into a picture only in Normal view.</s></li>
</ul>
<p><object classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11" height="0" id="alink_1" type="application/x-oleobject" width="0">
<param name="Command" value="ALink,MENU">
<param name="TEXT" value="Text:Related Topics">
<param name="fONT" value="VERDANA,8,0x000800,underline">
<param name="Item1" value="">
<param name="Item2" value="a_paint_enlarge_area">
</object></p>
</body>
</html>

69
static/html/jspaint/help/prettify-html.ahk Normal file
View File

@@ -0,0 +1,69 @@
; AutoHotkey script for formatting HTML with DirtyMarkup
; They actually have an API, but I decided to go this route instead of... looking for a CLI... which does exist
; Usage:
; * Open https://www.10bestdesign.com/dirtymarkup/
; * Check "Allow proprietary attributes"
; * Switch to your editor where you have some HTML
; * Press F12
F12::
; SetKeyDelay, 69, 69
; (extra) delays are needed only for interacting with the webpage
; so I've done sleeps below instead
; (they might also be needed if the editor is a webpage)
OriginalClipboard := ClipboardAll
Clipboard :=
WinGet, CodeEditorWinID, ID, A
Send, ^a
Send, ^c
ClipWait, 1
If ErrorLevel
{
MsgBox, Failed to copy from code editor (no change to clipboard in timeout period)
Goto, ResetAndEnd
}
If Trim(Clipboard) =
{
MsgBox, Failed to copy from code editor (clipboard empty)
Goto, ResetAndEnd
}
WinActivate, DirtyMarkup
WinWaitActive, DirtyMarkup, , 1
If ErrorLevel
{
MsgBox, Failed to activate DirtyMarkup; I'm not gonna open it for u just open it lol (and focus the tab)
Goto, ResetAndEnd
}
Click, 420, 420
Sleep, 50
Send, ^a
Sleep, 150 ; not sure this needs to be higher
Send, ^v
Sleep, 150 ; not sure this needs to be higher
Click, 69, 420
Clipboard :=
Click, 420, 420
Sleep, 50
Send, ^a
Sleep, 50
Send, ^c
ClipWait, 1
If ErrorLevel
{
MsgBox, Failed to copy from DirtyMarkup
Goto, ResetAndEnd
}
WinActivate ahk_id %CodeEditorWinID%
Send, ^a
Send, ^v
ResetAndEnd:
Clipboard := OriginalClipboard
Return
; Shortcut to move to next file
; This could be set up in your editor instead
F11::
Send ^0 ; Ctrl+0 focuses the sidebar in VS Code
Send {Down}{Enter}
Return

61
static/html/jspaint/help/vaporwave.js Normal file
View File

@@ -0,0 +1,61 @@
const clouds_img = document.createElement("img");
clouds_img.src = "clouds.jpg";
const mask_img = document.createElement("img");
mask_img.src = "cloud-mask.png";
const something_img = document.createElement("img");
something_img.src = "../images/icons/32x32.png";
const canvas = document.createElement("canvas");
document.getElementById("background-animation").append(canvas);
const ctx = canvas.getContext("2d");
const animate = () => {
rAF_ID = requestAnimationFrame(animate);
if (
canvas.width !== mask_img.width ||
canvas.height !== mask_img.height
) {
canvas.width = mask_img.width;
canvas.height = mask_img.height;
}
const clouds_scale = 1;
const clouds_width = clouds_img.width * clouds_scale;
const clouds_height = clouds_img.width * clouds_scale;
const x_extent = (clouds_width - canvas.width) / 2;
const y_extent = (clouds_height - canvas.height) / 2;
const x_interval_ms = 19000;
const y_interval_ms = 7000;
const now = performance.now();
if (!(
mask_img.complete && mask_img.naturalWidth > 1 &&
clouds_img.complete && clouds_img.naturalWidth > 1
)) {
return;
}
ctx.drawImage(
clouds_img,
Math.sin(now / x_interval_ms) * x_extent - x_extent,
Math.cos(now / y_interval_ms) * y_extent - y_extent,
clouds_width,
clouds_height
);
if (something_img.complete && something_img.naturalWidth > 1) {
let t = now / 5000;
ctx.globalAlpha = 0.3 + Math.max(0, Math.sin(-t) * 1);
ctx.drawImage(
something_img,
~~(Math.sin(-t) * canvas.width * 0.7),
~~(Math.cos(-t) * 70)
);
ctx.globalAlpha = 1;
}
ctx.globalCompositeOperation = "screen";
ctx.drawImage(mask_img, 0, 0);
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "white";
ctx.fillRect(0, mask_img.naturalHeight, mask_img.naturalWidth, canvas.height);
ctx.fillRect(mask_img.naturalWidth, 0, 50, canvas.height); // for scrollbar
};
animate();