scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
129 lines (101 loc) • 4.12 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 021</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
#my-image-store {
display: none;
}
.controls {
grid-template-columns: 1fr 2fr 1fr 2fr;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Filters test 021</h1>
<h2>Parameters for: corrode filter</h2>
<h3>To change image, drag-and-drop an image file over the canvas</h3>
<div class="controls">
<div class="yellow label">Operation</div>
<div class="yellow">
<select class="controlItem" id="operation">
<option value="average">average</option>
<option value="lowest">lowest</option>
<option value="highest">highest</option>
</select>
</div>
<div class="yellow label">Opacity</div>
<div class="yellow"><input class="controlItem" id="opacity" type="range" value="1" min="0" max="1" step="0.01" /></div>
<div class="pink label">Include red</div>
<div class="pink">
<select class="controlItem" id="includeRed">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
<div class="green label">Include green</div>
<div class="green">
<select class="controlItem" id="includeGreen">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
<div class="blue label">Include blue</div>
<div class="blue">
<select class="controlItem" id="includeBlue">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
<div class="lavender label">Include alpha</div>
<div class="lavender">
<select class="controlItem" id="includeAlpha">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
<div class="yellow label">Matrix Width</div>
<div class="yellow"><input class="controlItem" id="matrix_width" type="range" value="3" min="1" max="10" step="1" /></div>
<div class="yellow label">Matrix Height</div>
<div class="yellow"><input class="controlItem" id="matrix_height" type="range" value="3" min="1" max="10" step="1" /></div>
<div class="yellow label">Matrix Offset X</div>
<div class="yellow"><input class="controlItem" id="matrix_offset_x" type="range" value="1" min="0" max="10" step="1" /></div>
<div class="yellow label">Matrix Offset Y</div>
<div class="yellow"><input class="controlItem" id="matrix_offset_y" type="range" value="1" min="0" max="10" step="1" /></div>
<div class="yellow label">Memoize filter</div>
<div class="yellow">
<select class="controlItem" id="memoizeFilterOutput">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
</div>
<canvas
id="mycanvas"
width="600"
height="400"
data-scrawl-canvas
></canvas>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create various test entitys using both draw and fill</li>
<li>Create a corrode filter and apply it to the test entitys</li>
<li>Update filter attributes and observe the effect they have on the entitys</li>
</ul>
<p>Note that, because this image is being applied to the Cell, not the Picture entity, changing the image while filter memoization is in operation will not display the changed image. In cases like this, memoization needs to be switched of for one Display cycle for the change to be picked up, then switched back on again.</p>
<p><b>Touch test:</b> not required</p>
<p><a href="../docs/demo/filters-021.html">Annotated code</a></p>
</div>
<div id="my-image-store">
<img id="iris" src="img/iris.png" class="flowers" />
</div>
<script src="filters-021.js" type="module"></script>
</body>
</html>