scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
195 lines (168 loc) • 4.01 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo Filters 103</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
#my-image-store {
display: none;
}
.canvas-hold {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
row-gap: 1.5em;
column-gap: 1.5em;
margin-top: 1.5em;
}
.canvas-hold div {
padding: 1em;
border: 1px solid black;
}
#reportmessage {
width: 80%;
position: sticky;
top: 0;
z-index: 2;
background-color: #60d060;
padding: 0.5em 1em;
margin: 0 auto 1em;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Filters test 103</h1>
<h2>A gallery of compound filter effects</h2>
<h3>To change image, drag-and-drop an image file over the canvas</h3>
<p id="reportmessage"></p>
<div class="canvas-hold">
<div>
<p>Effect: blotchy newsprint with color</p>
<canvas
id="canvas-1"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: jagged transluscent blocks</p>
<canvas
id="canvas-2"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: brass rubbing</p>
<canvas
id="canvas-3"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: blueprint</p>
<canvas
id="canvas-4"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: comic</p>
<canvas
id="canvas-5"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: square quilt</p>
<canvas
id="canvas-6"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: raised tiles</p>
<canvas
id="canvas-7"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: blotchy color</p>
<canvas
id="canvas-8"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: watermarks</p>
<canvas
id="canvas-9"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: animated rainbow rays</p>
<canvas
id="canvas-10"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: grayscale CRT monitor</p>
<canvas
id="canvas-11"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
<div>
<p>Effect: color CRT monitor</p>
<canvas
id="canvas-12"
width="400"
height="400"
data-scrawl-canvas
></canvas>
</div>
</div>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create a suite of canvases, each to hold a different filter effect</li>
<li>Check that each filter applies to the image, as expected</li>
<li>Check that dragging an image file over any canvas leads to that image loading in all canvases, and that the filters apply to the new image</li>
</ul>
<p><b>Touch test:</b> not required</p>
<p><a href="../docs/demo/filters-103.html">Annotated code</a></p>
</div>
<div id="my-image-store">
<img id="iris" src="img/iris.png" class="flowers" />
</div>
<script src="filters-103.js" type="module"></script>
</body>
</html>