scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
159 lines (127 loc) • 6 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 052</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
#my-image-store {
display: none;
}
.instructions {
max-width: 48rem;
margin: 0 auto;
}
.canvas-container {
overflow: hidden;
resize: both;
border: 1px solid black;
width: 400px;
height: 400px;
min-height: 200px;
min-width: 200px;
max-height: 600px;
max-width: 600px;
margin: 1rem auto;
}
.button-container {
width: 100%;
text-align: center;
}
button {
font-size: 1.4rem;
padding: 0.4rem;
width: 280px;
margin-top: 1rem;
background-color: darkred;
color: yellow;
}
.controls {
grid-template-columns: 1fr 2fr 1fr 2fr;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 052</h1>
<h2>Create and use a RawAsset object to modify an image asset</h2>
<p class="instructions">Drag-drop an image onto the canvas to start doing Art with it. Click on the record button at any time to record your Art creation process. Video will download when you stop recording. Canvas (and video output) can be resized by dragging bottom-right corner. Note: video recording and download only works in Chrome and (possibly) Firefox.</p>
<div class="button-container">
<button id="my-record-video-button">Record a video</button>
</div>
<div class="canvas-container">
<canvas
id="mycanvas"
data-scrawl-canvas
data-is-responsive="true"
data-base-width="600"
data-base-height="600"
data-base-background-color="blanchedalmond"
data-fit="cover"
></canvas>
</div>
<p id="reportmessage"></p>
<div class="controls">
<div class="yellow label">Line width</div>
<div class="yellow"><input class="controlItem" id="lineWidth" type="range" value="4" min="1" max="20" step="1" /></div>
<div class="yellow label">Line opacity</div>
<div class="yellow"><input class="controlItem" id="lineOpacity" type="range" value="1" min="0" max="1" step="0.01" /></div>
<div class="yellow label">Line length multiplier</div>
<div class="yellow"><input class="controlItem" id="lineLengthMultiplier" type="range" value="20" min="1" max="100" step="1" /></div>
<div class="yellow label">Line length start</div>
<div class="yellow"><input class="controlItem" id="lineLengthStart" type="range" value="5" min="0" max="100" step="1" /></div>
<div class="blue label">Offset X</div>
<div class="blue"><input class="controlItem" id="offsetX" type="range" value="0" min="-100" max="100" step="1" /></div>
<div class="blue label">Offset Y</div>
<div class="blue"><input class="controlItem" id="offsetY" type="range" value="0" min="-100" max="100" step="1" /></div>
<div class="blue label">Rotation multiplier</div>
<div class="blue"><input class="controlItem" id="rotationMultiplier" type="range" value="90" min="0" max="360" step="1" /></div>
<div class="blue label">Rotation start</div>
<div class="blue"><input class="controlItem" id="rotationStart" type="range" value="0" min="0" max="360" step="1" /></div>
<div class="lavender label">Lines to add</div>
<div class="lavender"><input class="controlItem" id="linesToAdd" type="range" value="50" min="0" max="200" step="1" /></div>
<div class="lavender label">Line blend</div>
<div class="lavender">
<select class="controlItem" id="lineBlend">
<option value="source-over">normal</option>
<option value="color-burn">color-burn</option>
<option value="color-dodge">color-dodge</option>
<option value="darken">darken</option>
<option value="difference">difference</option>
<option value="exclusion">exclusion</option>
<option value="hard-light">hard-light</option>
<option value="lighten">lighten</option>
<option value="lighter">lighter</option>
<option value="multiply">multiply</option>
<option value="overlay">overlay</option>
<option value="screen">screen</option>
<option value="soft-light">soft-light</option>
<option value="color">color</option>
<option value="hue">hue</option>
<option value="luminosity">luminosity</option>
<option value="saturation">saturation</option>
</select>
</div>
<div class="pink label">Noise scale</div>
<div class="pink"><input class="controlItem" id="noiseScale" type="range" value="80" min="40" max="120" step="1" /></div>
</div>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create a RawAsset object which can amend an image to make it look like an Impressionist painting (think: Van Gogh).</li>
<li>The RawAsset object will require both a NoiseAsset object, and an ImageAsset object - the NoiseAsset will affect how the RawAsset will modify the ImageAsset.</li>
<li>Include additional controls to allow the user to modify the output in various ways.</li>
<li>In addition: allow user to drag-and-drop their own image file onto the canvas, to use as the base for the painting exercise.</li>
<li>Include functionality to allow the user to record their output as a video, and download that video.</li>
</ul>
<p><b>Touch test:</b> not required. Ability to drag/drop files onto canvas in touch devices not yet investigated - best UX would probably be to display a normal HTML file selector form.</p>
<p><a href="../docs/demo/canvas-052.html">Annotated code</a></p>
</div>
<div id="my-image-store">
<img id="iris" src="img/iris.png" class="flowers" />
</div>
<script src="canvas-052.js" type="module"></script>
</body>
</html>