scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
179 lines (143 loc) • 6.32 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 033</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<!-- using an external font library for the control buttons, for convenience -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
canvas {
background-color: lemonchiffon;
}
.javascript-disabled canvas {
background-color: transparent;
border: 0;
background-image: url("thumbs/canvas-033.webp");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.javascript-disabled canvas > nav,
.javascript-disabled canvas > div {
height: auto;
max-height: none;
}
.canvas-host {
overflow: hidden;
resize: both;
border: 1px solid black;
width: 400px;
height: 400px;
min-width: 200px;
min-height: 200px;
max-width: 800px;
max-height: 800px;
position: relative;
}
.canvas-host::after {
position: absolute;
content: '';
bottom: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 1em solid red;
border-left: 1em solid transparent;
}
.animation-controls {
position: absolute;
top: 0;
left: calc(50% - 51px);
width: 102px;
background-color: #ffffff8f;
}
.javascript-disabled .animation-controls {
display: none;
}
.animation-controls button {
background-color: transparent;
border-width: 0;
padding: 0;
display: inline-block;
}
.animation-controls button:hover {
cursor: pointer;
}
.animation-controls span {
font-size: 48px;
opacity: 0.5;
}
.animation-controls span:hover {
opacity: 1;
}
.animation-controls {
position: absolute;
top: 0;
right: 0;
width: 104px;
background-color: #ffffff8f;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 033</h1>
<h2>User preferences: prefers-color-scheme; prefers-reduced-motion; Javascript disabled</h2>
<h3>This canvas is resizable - drag the bottom right corner to change its dimensions.</h3>
<div class="canvas-host javascript-disabled">
<canvas
id="mycanvas"
data-scrawl-canvas
data-is-responsive="true"
data-base-width="800"
data-base-height="800"
data-fit="cover"
>
<p id="no-js-note" style="background-color: rgba(255,255,255,0.9); padding: 1em;">This content will <b>visually</b> appear when Javascript is disabled, and should be used to describe what the canvas would be showing had JS been working. Also include any <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas">relevant links in this copy</a>. Be aware that this text will display over the background image, so needs some styling to show up more clearly. Remember, if JS has been disabled, then text included in Phrase entitys and Anchor objects will not be processed and exposed in the canvas's sub-DOM! Note that Scrawl-canvas appends sub-DOM data/copy, so this paragraph will be the first canvas-related thing a screen reader encounters - unless we get the script snippet to add <i>aria-hidden="true"</i> as an attribute to this element.</p>
</canvas>
<!--
This is a test to see if JS has been disabled
- if it has, then the class will not be removed
- meaning we can display a background image instead
-->
<script>
document.querySelector('.canvas-host').classList.remove('javascript-disabled');
document.querySelector('#no-js-note').setAttribute('aria-hidden', 'true');
</script>
<!-- animation control buttons -->
<div class="animation-controls">
<button id="play" title="Play animation">
<span class="material-icons">play_circle</span>
</button>
<button id="pause" title="Pause animation">
<span class="material-icons">pause_circle</span>
</button>
</div>
</div>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create a resizable <canvas> element</li>
<li>Create animated Oval and Phrase entitys to display in the canvas</li>
<li>Create hook functions for the Phrase that will be invoked as the user enables and disables 'prefers-color-scheme' and 'prefers-reduced-motion' in the Browser's Inspector (Chrome)</li>
<ul>
<li>When 'prefers-color-scheme' is set to 'light' (default) the background should be light gray and the text dark green</li>
<li>When 'prefers-color-scheme' is set to 'dark' the background should be dark gray and the text light green</li>
<li>When 'prefers-reduced-motion' is set to 'reduced' the animation should stop; resizing the <canvas> element should NOT lead to distortions in the scene</li>
<li>When 'prefers-reduced-motion' is unset the animation should start.</li>
</ul>
<li>When reloading the page, the scene should respect the last choices made in the browser's Inspector; in particular, if 'prefers-reduced-motion' has been set to 'reduced' the animation should play for five seconds, then stop automatically.</li>
</ul>
<p>To toggle user preferences in Chrome: open the Inspector, press Ctrl/Cmd+Shift+P, type 'show rendering', click on the 'Show rendering' button.</p>
<p>This demo also includes HTML/CSS code for action to take when Javascript has been disabled on a page. Specifically, a background image will be displayed in the canvas (via CSS) unless a <script> tag in the HTML immediately following the <canvas> element runs - the code removes a class from the canvas element, which prevents the background image displaying. Test this by disabling Javascript in the browser and then reloading the demo.</p>
<p><b>Touch test:</b> canvas should be resizable</p>
<p><a href="../docs/demo/canvas-033.html">Annotated code</a></p>
</div>
<script src="canvas-033.js" type="module"></script>
</body>
</html>