gradient mask on mouse move with paper.js

by Nick Hulea

HTML

<script src="http://files.hulea.org/paperjs-v0.9.18/dist/paper-full.min.js"></script>
<script src="http://yourimage.io/dev_2/js/plugins.js"></script>
<div id="contain">
    <div id="preloader" style="display:none;">
        <div id="bar"></div>
        <div id="status">
<span id="percentage"></span>
 <b>Instructions:</b>

            <br>
            <br> <b>Mouse Move</b> = painting (speed effects the weight of the stroke)
            <br>
            <br> <b>Mouse Click</b> = new image from the Internet
            <br>
            <br> <b>Spacebar</b> = opens a window where you see and save your image
            <br>
            <br>
        </div>
    </div>
    <div id="outerTools" class="flip-container" style="display:none;font-family:monospace;">
        <div class="flipper">
            <div id="innerTools" class="front">
                <div class="centerImage">
                    <img id="myImg" style="background-color:#fff;max-width:100%;margin:0auto;" src="">
                </div>
                <div id="saveImage">save</div>
                <form xmlns="http://www.w3.org/1999/xhtml" id="canvas-options">
                    <div id="name_download">
                        <input type="hidden" class="filename" id="canvas-filename" placeholder="yourimage" />
                    </div>
                </form>
            </div>
            <div id="info">2014 v1.0 <em><a href="mailto:[email protected]" target="_blank">nick hulea</a></em>

            </div>
        </div>
    </div>
    <canvas resize="true" id="mycanvas"></canvas>
</div>
<script type="text/paperscript" canvas="mycanvas">
    var r, path, raster, background, imagesrc, path3;
    var preloadAmount = 10;
    var cache = [];
    var imgurcache = [];
    var rArray = [];
    var convertedArray = [];
    var ajaxlength = [];
    var autoShowNext = false;
    var loaded = false;
    var value = isNaN(value) ? 0 : value;
    var valueajax = isNaN(valueajax) ? 0 : valueajax;
    var press =...

CSS

button, csws html, input, select, textarea {
    color:#222
}
::-moz-selection {
    background:#b3d4fc;
    text-shadow:none
}
::selection {
    background:#b3d4fc;
    text-shadow:none
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #ccc;
    margin:1em 0;
    padding:0
}
fieldset {
    border:0;
    margin:0;
    padding:0
}
textarea {
    resize:vertical
}
.chromeframe {
    margin:.2em 0;
    background:#ccc;
    color:#000;
    padding:.2em 0
}
.wrapper {
    width:90%;
    margin:0 5%
}
.header-container {
    border-bottom:20px solid #e44d26
}
.footer-container, .main aside {
    border-top:20px solid #e44d26
}
.footer-container, .header-container, .main aside {
    background:#f16529
}
.title {
    color:#fff
}
nav ul {
    margin:0;
    padding:0
}
nav a {
    display:block;
    margin-bottom:10px;
    padding:15px 0;
    text-align:center;
    text-decoration:none;
    font-weight:700;
    color:#fff;
    background:#e44d26
}
nav a:hover, nav a:visited {
    color:#fff
}
nav a:hover {
    text-decoration:underline
}
.main {
    padding:30px 0
}
.main article h1 {
    font-size:2em
}
.main aside {
    color:#fff;
    padding:0 5% 10px
}
.footer-container footer {
    color:#fff;
    padding:20px 0
}
.ie7 .title {
    padding-top:20px
}
.show_hidepallete {
    display:block
}
body>div.palettejs-panel>table>tr>td:nth-child(1) {
    padding:5px;
    margin:6px;
    border-spacing:10px
}
body>div.palettejs-panel>table>tr>td:nth-child(2) {
    position:relative;
    top:4px;
    left:10px
}
body>div.palettejs-panel>table>tr>td {
    padding:5px;
    margin:6px
}
body>div.palettejs-panel {
    background-color:rgba(0, 0, 0, .5);
    position:absolute;
    top:0;
    font-weight:700;
    text-transform:uppercase;
    padding:10px 20px 10px 10px;
    color:#fff;
    overflow:hidden;
    margin:20px
}
#mycanvas {
    display:block;
    position:absolute;
    width:100%;
    height:100%
}
#preloader {
    position:fixed;
   ...