scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
145 lines (126 loc) • 5.76 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 Canvas 007</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
.controls {
grid-template-columns: 1fr 2fr 1fr 2fr;
}
img {
display: none;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 007</h1>
<h2>Apply filters at the entity, group and cell level</h2>
<div class="controls">
<div class="green label">Select filter</div>
<div class="green">
<select class="controlItem" id="filter">
<option value="">none</option>
<option value="" disabled>--Method filters--</option>
<option value="alphaToChannels">alphaToChannels</option>
<option value="areaAlpha">areaAlpha</option>
<option value="blue">blue</option>
<option value="blur">blur (legacy)</option>
<option value="brightness">brightness</option>
<option value="channels">channels</option>
<option value="channelLevels">channelLevels</option>
<option value="channelstep">channelstep</option>
<option value="channelsToAlpha">channelsToAlpha</option>
<option value="chroma">chroma</option>
<option value="chromakey">chromakey</option>
<option value="clampChannels">clampChannels</option>
<option value="corrode">corrode</option>
<option value="curveWeights">curveWeights</option>
<option value="cyan">cyan</option>
<option value="edgeDetect">edge detect</option>
<option value="emboss">emboss</option>
<option value="flood">flood</option>
<option value="gaussianBlur">gaussianBlur</option>
<option value="glitch">glitch</option>
<option value="gray">gray</option>
<option value="grayscale">grayscale</option>
<option value="green">green</option>
<option value="invert">invert</option>
<option value="magenta">magenta</option>
<option value="mapToGradient">mapToGradient</option>
<option value="matrix">matrix</option>
<option value="matrix5">matrix5</option>
<option value="newsprint">newsprint</option>
<option value="notblue">notblue</option>
<option value="notgreen">notgreen</option>
<option value="notred">notred</option>
<option value="offset">offset</option>
<option value="offsetChannels">offsetChannels</option>
<option value="pixelate">pixelate</option>
<option value="randomNoise">randomNoise</option>
<option value="red">red</option>
<option value="reducePalette">reducePalette</option>
<option value="saturation">saturation</option>
<option value="sepia">sepia</option>
<option value="sharpen">sharpen</option>
<option value="swirl">swirl</option>
<option value="threshold">threshold</option>
<option value="tiles">tiles</option>
<option value="tint">tint</option>
<option value="yellow">yellow</option>
<option value="" disabled>--Compound filters--</option>
<option value="blend">blend (with image)</option>
<option value="compose">compose (with image)</option>
<option value="displace">displace (with noise asset)</option>
<option value="dropShadow">Drop Shadow</option>
<option value="redBorder">Red Borders</option>
</select>
</div>
<div class="green label">Apply filter to</div>
<div class="green">
<select class="controlItem" id="target">
<option value="">none</option>
<option value="block1">block1</option>
<option value="block2">block2</option>
<option value="wheel1">wheel1</option>
<option value="wheel2">wheel2</option>
<option value="group">group</option>
<option value="cell">cell</option>
</select>
</div>
</div>
<canvas
id="mycanvas"
width="410"
height="400"
data-scrawl-canvas
data-base-background-color="beige"
></canvas>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create and clone block and wheel entitys with no name attribute, and dimensions in %strings</li>
<li>Create a selection of filters for testing</li>
<li>Check that the selected filter applies correctly to the selected entity only</li>
<li>Make sure the filter correctly covers animated entitys (when selected), and no other part of the canvas</li>
<li>Check that when the filter is applied to the group, all entitys (but not the cell) are affected</li>
<li>Check that when the filter is applied to the cell, the entire canvas is affected</li>
</ul>
<h4>Notes</h4>
<ul>
<li>The gray areas when chroma filter is applied at the group level is expected behaviour - all entitys get filtered at the same time, thus when a pixel is removed the underlying color will be the cell's background color</li>
<li>The blur filter is generally much slower than other filters. Unless we specifically need some of the additional features offered by the blur filter, use gaussianBlur instead.</li>
<li>Other slower filters include matrix5, reducePalette.</li>
</ul>
<p><b>Touch test:</b> not required</p>
<p><a href="../docs/demo/canvas-007.html">Annotated code</a></p>
</div>
<img id="perlin" src="img/perlin-noise-texture.png" class="filter-image" />
<img id="iris" src="img/iris.png" class="filter-image" />
<script src="canvas-007.js" type="module"></script>
</body>
</html>