scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
88 lines (70 loc) • 2.49 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 058</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
.controls {
grid-template-columns: 1fr 2fr 1fr 2fr;
}
canvas {
margin: 0 auto;
}
img {
display: none;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 058</h1>
<h2>Image smoothing</h3>
<div class="controls">
<div class="yellow label">Image smoothing enabled</div>
<div class="yellow">
<select class="controlItem" id="imageSmoothingEnabled">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
<div class="yellow label">Image smoothing quality</div>
<div class="yellow">
<select class="controlItem" id="imageSmoothingQuality">
<option value="low">low</option>
<option value="medium">medium</option>
<option value="high">high</option>
</select>
</div>
<div class="pink label">CSS font smoothing</div>
<div class="pink">
<select class="controlItem" id="smoothFont">
<option value="0">false</option>
<option value="1">true</option>
</select>
</div>
</div>
<canvas
id="mycanvas"
width="600"
height="600"
data-scrawl-canvas
></canvas>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Create a Cell and populate it with text; import image</li>
<li>Create copy-scaled Picture entitys from the Cell and Image assets</li>
<li>Check the effects of changing the ImageSmoothingEnabled and imageSmoothingQuality attributes on the Picture entitys</li>
</ul>
<p>Note that, in general, Scrawl-canvas avoids scaling the canvas when it stamps entitys onto it, preferring instead to pre-calculate scaling effects on entity dimensions etc. Smoothing is most likely to be an issue when scaling copied data from an asset, as may happen with Picture entitys and Pattern styles.</p>
<p><b>Touch test:</b> not required</p>
<p><a href="../docs/demo/canvas-058.html">Annotated code</a></p>
</div>
<img id="iris" src="img/iris.png" class="flowers" />
<script src="canvas-058.js" type="module"></script>
</body>
</html>