scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
83 lines (64 loc) • 2.57 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 DOM 011</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
.controls {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#mystack {
touch-action: none;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - DOM test 011</h1>
<h2>Canvas controller 'fit' attribute; Cell positioning (mouse)</h2>
<div class="controls">
<div class="green label">Canvas fit</div>
<div class="green">
<select class="controlItem" id="fitselect">
<option value="none">none</option>
<option value="contain">contain</option>
<option value="cover">cover</option>
<option value="fill">fill</option>
</select>
</div>
<div class="yellow label">Stack dimensions</div>
<div class="yellow">Width: <input class="controlItem" id="width" type="range" value="400" min="200" max="1000" step="10" />
</div>
<div class="yellow">Height: <input class="controlItem" id="height" type="range" value="400" min="200" max="1000" step="10" />
</div>
</div>
<div id="mystack" data-scrawl-stack>
<canvas
id="mycanvas"
data-scrawl-canvas
data-is-responsive="true"
data-base-width="800"
data-base-height="600"
data-base-background-color="lightblue"
data-fit="fill"
></canvas>
</div>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Check that the canvas completely fills the stack's dimensions on initial display</li>
<li>Check the various fit modes by which the base (hidden) canvas can be copied over to its display canvas</li>
<li>Check the canvas responds to changes in its container stack's dimensions, with no flickering as the dimensions change</li>
<li>Check that the darker blue 'cell' canvas correctly tracks the mouse cursor when it hovers over the stack element, with no errors in positioning whatever the setting of the canvas object's 'fit' attribute</li>
</ul>
<p>See <a href="canvas-036.html">Demo Canvas-036</a> for additional Cell functionality tests.</p>
<p><b>Touch test:</b> should work as expected</p>
<p><a href="../docs/demo/dom-011.html">Annotated code</a></p>
</div>
<script src="dom-011.js" type="module"></script>
</body>
</html>