# Scrawl-canvas v8 - Canvas test 025

## Various responsive and non-responsive canvases; responsive images

### Non-responsive canvas elements

`The default canvas element By default, browsers will create canvas elements with a width of 300px and a height of 150px HTML: <canvas id="nr-canvas-1" data-scrawl-canvas ></canvas> Note that 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`
`The sized canvas element We can set the canvas dimensions using the width and height attributes HTML: <canvas id="nr-canvas-2" width="300" height="300" data-scrawl-canvas ></canvas>`
`Canvas elements and CSS box-sizing Canvas elements ignore all attempts to set their CSS box-sizing property to anything other than 'content-box' CSS: .padded-canvas { border: 24px dashed aqua; padding: 24px; background-color: teal; box-sizing: border-box; } HTML: <canvas id="nr-canvas-3" class="padded-canvas" data-scrawl-canvas ></canvas> Be aware: 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.`
`Sizing the canvas element using CSS While Scrawl-canvas static canvases can be sized using CSS, this is not a recommended practice. CSS: .nr-canvas-css-dimensions { width: 600px; height: 200px; } HTML: <canvas id="nr-canvas-4" class="nr-canvas-css-dimensions" data-scrawl-canvas ></canvas>`

### Responsive canvas elements

`Sizing the canvas element using CSS (continued) Attempts to use CSS to make the canvas element 'responsive' will not work on Scrawl-canvas canvases. CSS: .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%; } HTML: <div class="canvas-container"> <canvas id="nr-canvas-5" class="nr-canvas-css-relative" data-scrawl-canvas ></canvas> </div>`
`Make the canvas responsive using Scrawl-canvas To make a canvas responsive, add the data-is-responsive="true" attribute to it HTML: <div class="canvas-container"> <canvas id="canvas-1" data-scrawl-canvas data-is-responsive="true" ></canvas> </div>`
`Emulate the CSS image-fit property 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 HTML: <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"`

### Responsive images

`Defining a responsive image in HTML Scrawl-canvas can use an image asset defined in an <img> element with a srcset attribute, and will update the image in line with browser updates in response to changes in their viewport widths. HTML: <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.webp" srcset="img/river-300.webp 300w, img/river-600.webp 600w, img/river-900.webp 900w, img/river-1200.webp 1200w, img/river-1600.webp 1600w, img/river-2000.webp 2000w, img/river-2400.webp 2400w, img/river-2800.webp 2800w, img/river-3200.webp 3200w, img/river-3600.webp 3600w, img/river-4000.webp 4000w" data-dimensions='{ "river-300.webp": [300, 225], "river-600.webp": [600, 450], "river-900.webp": [900, 675], "river-1200.webp": [1200, 900], "river-1600.webp": [1600, 1200], "river-2000.webp": [2000, 1500], "river-2400.webp": [2400, 1800], "river-2800.webp": [2800, 2100], "river-3200.webp": [3200, 2400], "river-3600.webp": [3600, 2700], "river-4000.webp": [4000, 3000] }' /> Javascript: 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 intrinsic dimensions of each image 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.`

#### Test purpose

- Setup a number of responsive and non-responsive canvas elements
- Import a responsive image (with a srcset attribute) from the DOM
- Create Oval and Picture entitys to demonstrate the points being made above each canvas
- Change the browser's viewport size
- Check that when the browser selects a different srcset image, the canvas displays that image

Known issue: 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.

Known issue: Firefox browser will load new images on when viewport width both increases and decreases.

Touch test: not required (though some canvases should be resizable)

Annotated code