scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
378 lines (317 loc) • 10.4 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 025</title>
<link href="css/normalize.css" rel="stylesheet" />
<link href="css/tests.css" rel="stylesheet" />
<style>
body {
margin: 1em 0;
border: 0;
padding: 0;
}
section {
margin: 0 1em;
}
section h3 {
font-size: 2em;
text-align: left;
margin-top: 1em;
}
section code {
border-top: 4px solid lightgray;
}
section .canvas-container {
overflow: hidden;
resize: both;
border: 1px solid black;
width: 400px;
height: 400px;
min-width: 200px;
min-height: 200px;
max-width: 800px;
max-height: 800px;
}
section .nr-canvas-css-relative {
width: 100%;
height: 100%;
}
section .nr-canvas-css-dimensions {
width: 600px;
height: 200px;
}
section .padded-canvas {
border: 24px dashed aqua;
padding: 24px;
box-sizing: border-box;
background-color: teal;
}
section .boxed {
box-sizing: border-box;
border-style: double;
}
section .with-responsiveness {
width: 100%;
height: 100%;
border: 4px dashed red;
}
section kbd {
background-color: beige;
padding: 2px;
}
section code {
background-color: beige;
font-size: 16px;
line-height: 1.5;
padding: 0 1em;
margin-top: 1em;
white-space: pre-wrap;
}
section li {
margin-bottom: 0.7em;
}
.myimage {
height: 0;
}
</style>
</head>
<body>
<h1><a href="index.html">Scrawl-canvas v8</a> - Canvas test 025</h1>
<h2>Various responsive and non-responsive canvases; responsive images</h2>
<section>
<h3>Non-responsive canvas elements</h3>
<code>
<b><u>The default canvas element</u></b>
By default, browsers will create canvas elements with a width of 300px and a height of 150px
<u>HTML:</u>
<canvas
id="nr-canvas-1"
data-scrawl-canvas
></canvas>
<b><i>Note that</i></b> the blue oval uses relative ('n%' string) values to set its x and y radiuses, and changes its appearance in line with the canvas element's dimensions, whereas the green oval uses absolute (n number) values so is unaffected by changes in the canvas element's dimensions
</code>
<canvas id="nr-canvas-1" data-scrawl-canvas></canvas>
<code>
<b><u>The sized canvas element</u></b>
We can set the canvas dimensions using the width and height attributes
<u>HTML:</u>
<canvas
id="nr-canvas-2"
width="300"
height="300"
data-scrawl-canvas
></canvas>
</code>
<canvas id="nr-canvas-2" width="300" height="300" data-scrawl-canvas></canvas>
<code>
<b><u>Canvas elements and CSS box-sizing</u></b>
Canvas elements ignore all attempts to set their CSS box-sizing property to anything other than 'content-box'
<u>CSS:</u>
.padded-canvas {
border: 24px dashed aqua;
padding: 24px;
background-color: teal;
box-sizing: border-box;
}
<u>HTML:</u>
<canvas
id="nr-canvas-3"
class="padded-canvas"
data-scrawl-canvas
></canvas>
<b><i>Be aware:</i></b> Scrawl-canvas will include the canvas border and padding values when calculating the dimensions of the canvas element's base cell, making it larger than the display canvas. This will have a effect on the displayed graphic - strokes, and some shapes, will look thinner/smaller than expected.
</code>
<canvas id="nr-canvas-3" class="padded-canvas" data-scrawl-canvas></canvas>
<code>
<b><u>Sizing the canvas element using CSS</u></b>
While Scrawl-canvas static canvases can be sized using CSS, this is not a recommended practice.
<u>CSS:</u>
.nr-canvas-css-dimensions {
width: 600px;
height: 200px;
}
<u>HTML:</u>
<canvas
id="nr-canvas-4"
class="nr-canvas-css-dimensions"
data-scrawl-canvas
></canvas>
</code>
<canvas id="nr-canvas-4" class="nr-canvas-css-dimensions" data-scrawl-canvas></canvas>
<h3>Responsive canvas elements</h3>
<code>
<b><u>Sizing the canvas element using CSS (continued)</u></b>
Attempts to use CSS to make the canvas element 'responsive' <b><i>will not work</i></b> on Scrawl-canvas canvases.
<u>CSS:</u>
.canvas-container {
overflow: hidden;
resize: both;
border: 1px solid black;
width: 400px;
height: 400px;
min-width: 200px;
min-height: 200px;
max-width: 800px;
max-height: 800px;
}
.nr-canvas-css-relative {
width: 100%;
height: 100%;
}
<u>HTML:</u>
<div class="canvas-container">
<canvas
id="nr-canvas-5"
class="nr-canvas-css-relative"
data-scrawl-canvas
></canvas>
</div>
</code>
<div class="canvas-container">
<canvas id="nr-canvas-5" class="nr-canvas-css-relative" data-scrawl-canvas></canvas>
</div>
<code>
<b><u>Make the canvas responsive using Scrawl-canvas</u></b>
To make a canvas responsive, add the <i>data-is-responsive="true"</i> attribute to it
<u>HTML:</u>
<div class="canvas-container">
<canvas
id="canvas-1"
data-scrawl-canvas
data-is-responsive="true"
></canvas>
</div>
</code>
<div class="canvas-container">
<canvas id="canvas-1" data-scrawl-canvas data-is-responsive="true"></canvas>
</div>
<code>
<b><u>Emulate the CSS image-fit property</u></b>
We can add additional data- attributes to the canvas element's markup to set the dimensions of its base cell, and determine how the base cell will fit into its display canvas
<u>HTML:</u>
<div class="canvas-container">
<canvas
id="canvas-2"
data-scrawl-canvas
data-is-responsive="true"
data-base-width="400"
data-base-height="400"
data-fit="contain"
></canvas>
</div>
Scrawl-canvas supports the following data-fit values: "none" (the default); "cover"; "contain"; and "fill"
</code>
<div class="canvas-container">
<canvas id="canvas-2" data-scrawl-canvas data-is-responsive="true" data-base-width="400" data-base-height="400" data-fit="contain"></canvas>
</div>
<h3>Responsive images</h3>
<code>
<b><u>Defining a responsive image in HTML</u></b>
Scrawl-canvas can use an image asset defined in an <img> element with a <b>srcset</b> attribute, and will update the image in line with browser updates in response to changes in their viewport widths.
<u>HTML:</u>
<div class="canvas-container">
<canvas
id="canvas-3"
data-scrawl-canvas
data-is-responsive="true"
data-base-width="800"
data-base-height="400"
data-fit="cover"
></canvas>
</div>
<img
id="river"
class="myimage"
alt="Image used in canvas element"
src="img/river.jpg"
srcset="img/river-300.jpg 300w,
img/river-600.jpg 600w,
img/river-900.jpg 900w,
img/river-1200.jpg 1200w,
img/river-1600.jpg 1600w,
img/river-2000.jpg 2000w,
img/river-2400.jpg 2400w,
img/river-2800.jpg 2800w,
img/river-3200.jpg 3200w,
img/river-3600.jpg 3600w,
img/river-4000.jpg 4000w"
data-dimensions='{
"river-300.jpg": [300, 225],
"river-600.jpg": [600, 450],
"river-900.jpg": [900, 675],
"river-1200.jpg": [1200, 900],
"river-1600.jpg": [1600, 1200],
"river-2000.jpg": [2000, 1500],
"river-2400.jpg": [2400, 1800],
"river-2800.jpg": [2800, 2100],
"river-3200.jpg": [3200, 2400],
"river-3600.jpg": [3600, 2700],
"river-4000.jpg": [4000, 3000]
}'
/>
<u>Javascript:</u>
const canvas3 = scrawl.library.canvas['canvas-3'];
scrawl.importDomImage('.myimage');
scrawl.makePicture({
name: `${canvas3.name}-image`,
group: canvas3.base.name,
asset: "river",
width: "100%",
height: "100%",
copyWidth: "100%",
copyHeight: "100%"
});
To work correctly, we need to add some additional data to the element - specifically the <b>intrinsic dimensions of each image</b> defined in the srcset attribute, supplied as a JSON string of an object with the filename of each image as a key and an array of that image's width and height (in px) as the value to that key.
</code>
<div class="canvas-container">
<canvas id="canvas-3" data-scrawl-canvas data-is-responsive="true" data-base-width="800" data-base-height="400" data-fit="cover"></canvas>
</div>
</section>
<p id="reportmessage"></p>
<div class="testinfo">
<h4>Test purpose</h4>
<ul>
<li>Setup a number of responsive and non-responsive canvas elements</li>
<li>Import a responsive image (with a srcset attribute) from the DOM</li>
<li>Create Oval and Picture entitys to demonstrate the points being made above each canvas</li>
<li>Change the browser's viewport size</li>
<li>Check that when the browser selects a different srcset image, the canvas displays that image</li>
</ul>
<p><b>Known issue:</b> Webkit based browsers (for example: Safari) will load an appropriately sized image initially, but does not respond by uploading additional images as the browser dimensiopns change.</p>
<p><b>Known issue:</b> Firefox browser will load new images on when viewport width both increases and decreases.</p>
<p><b>Touch test:</b> not required (though some canvases should be resizable)</p>
<p><a href="../docs/demo/canvas-025.html">Annotated code</a></p>
</div>
<img id="river" class="myimage" alt="Image used in canvas element"
src="img/river.jpg"
srcset="img/river-300.jpg 300w,
img/river-600.jpg 600w,
img/river-900.jpg 900w,
img/river-1200.jpg 1200w,
img/river-1600.jpg 1600w,
img/river-2000.jpg 2000w,
img/river-2400.jpg 2400w,
img/river-2800.jpg 2800w,
img/river-3200.jpg 3200w,
img/river-3600.jpg 3600w,
img/river-4000.jpg 4000w"
data-dimensions='{
"river-300.jpg": [300, 225],
"river-600.jpg": [600, 450],
"river-900.jpg": [900, 675],
"river-1200.jpg": [1200, 900],
"river-1600.jpg": [1600, 1200],
"river-2000.jpg": [2000, 1500],
"river-2400.jpg": [2400, 1800],
"river-2800.jpg": [2800, 2100],
"river-3200.jpg": [3200, 2400],
"river-3600.jpg": [3600, 2700],
"river-4000.jpg": [4000, 3000]
}'
/>
<script src="canvas-025.js" type="module"></script>
</body>
</html>