Add backgroundColor to UC1

Author: JulieWinchester

source/presentation/4.0/example/uc01_artwork.json

@@ -114,6 +114,7 @@
             "type": "Canvas",
             "width": 6000,
             "height": 3813,
+            "backgroundColor": "#99CCFF",
             "items": [
                 {
                     "id": "https://iiif.io/api/presentation/4.0/example/09/page/p2",

source/presentation/4.0/example/uc06_3d_annotation.json

@@ -13,7 +13,7 @@
             "id": "https://iiif.io/api/presentation/4.0/example/uc06/scene/1",
             "type": "Scene",
             "label": { "en": [ "A Scene" ] },
-            "backgroundColor": "#FF00FE",
+            "backgroundColor": "#99CCFF",
             "items": [
                 {
                     "id": "https://iiif.io/api/presentation/4.0/example/uc06/scene/1/page/1",

source/presentation/4.0/example/uc06_audio_with_3d.json

@@ -16,7 +16,7 @@
                     "Chess Pieces with Spatial Audio"
                 ]
             },
-            "backgroundColor": "#FF00FE",
+            "backgroundColor": "#99CCFF",
             "interactionMode": [ "hemisphere-orbit" ],
             "duration": 60,
             "items": [

source/presentation/4.0/example/uc06_multiple_3d_objects.json

@@ -8,7 +8,7 @@
             "id": "https://iiif.io/api/presentation/4.0/example/uc06/scene/1",
             "type": "Scene",
             "label": { "en": [ "Chess Game Pieces" ] },
-            "backgroundColor": "#FF00FE",
+            "backgroundColor": "#99CCFF",
             "interactionMode": [ "hemisphere-orbit" ],
             "items": [
                 {

source/presentation/4.0/index.md

@@ -351,7 +351,7 @@ This example is a Manifest with one Canvas, representing an artwork. The content
 
 The unit integer coordinates of the Canvas (6000 x 3813) are not the same as the pixel dimensions of the JPEG image (2000 x 1271), but they are proportional---the Canvas has a 4:3 landscape aspect ratio, and so does the JPEG image.The [`target`][prezi-40-model-target] property of the Annotation is the Canvas [`id`][prezi-40-model-id], unqualified by any particular region; this is taken to mean the content (the image) should fill the Canvas completely. As the Canvas and the image are the same aspect ratio, no distortion will occur. This approach allows the current image to be replaced by a higher resolution image in future, on the same Canvas. The Canvas dimensions establish a coordinate system for _painting annotations_ and other kinds of annotation that link content with the Canvas; they are not pixels of images.
 
-The example demonstrates the use of the common descriptive properties [`label`][prezi-40-model-label] for the title of the artwork, [`metadata`][prezi-40-model-metadata] for additional information to display to the user, [`summary`][prezi-40-model-summary] for a brief description of the artwork, [`rights`][prezi-40-model-rights] to assert a rights statement or license from a controlled vocabulary, [`homepage`][prezi-40-model-homepage] to link to the artwork's specific web page, [`thumbnail`][prezi-40-model-thumbnail] to provide a small image to stand for the Manifest, [`provider`][prezi-40-model-provider] to give information about the publisher of the Manifest, and finally, [`service`][prezi-40-model-service] to specify a IIIF Image API service that provides features such as deep zooming, derivative generation, image fragment referencing, rotation, and more.
+The example demonstrates the use of the common descriptive properties [`label`][prezi-40-model-label] for the title of the artwork, [`metadata`][prezi-40-model-metadata] for additional information to display to the user, [`summary`][prezi-40-model-summary] for a brief description of the artwork, [`rights`][prezi-40-model-rights] to assert a rights statement or license from a controlled vocabulary, [`homepage`][prezi-40-model-homepage] to link to the artwork's specific web page, [`thumbnail`][prezi-40-model-thumbnail] to provide a small image to stand for the Manifest, [`provider`][prezi-40-model-provider] to give information about the publisher of the Manifest, and finally, [`service`][prezi-40-model-service] to specify a IIIF Image API service that provides features such as deep zooming, derivative generation, image fragment referencing, rotation, and more. The example also demonstrates the use of the [`backgroundColor`][prezi-40-model-backgroundColor] property to provide a background color for the Canvas.
 
 {% include code_example.html src="uc01_artwork.json" %}
 
@@ -367,13 +367,14 @@ The example demonstrates the use of the common descriptive properties [`label`][
 * The [`service`][prezi-40-model-service] property specifies a software application that a client might interact with to gain additional information or functionality, in this case, the IIIF Image API. Images in IIIF do not require an Image Service---we have included one here as an example, but do not include a service in the following image examples for brevity.
 * The [`seeAlso`][prezi-40-model-seeAlso] property links this Manifest to the catalogue record for the item it represents. In general, [`seeAlso`][prezi-40-model-seeAlso] links to any related _machine readable_ data. Clients can choose to make use of it if they recognise it by [`type`][prezi-40-model-type], [`format`][prezi-40-model-format] and [`profile`][prezi-40-model-profile], but it is more likely to be consumed by machines, for example a process harvesting IIIF Manifests could index the linked descriptive metadata.
 * The [`partOf`][prezi-40-model-partOf] property links to a IIIF Collection that contains a reference to this Manifest in its `items` property. The [`partOf`][prezi-40-model-partOf] property allows a Manifest to assert its place in any hierarchical relationship, such as an archival description, or a volume of a periodical, allowing the user (or machines) to navigate "up" the hierarchy and explore further.
+* The [`backgroundColor`][prezi-40-model-backgroundColor] property on the Canvas specifies a hex value RGB color to use as the background color behind any painted resources. In this example, the resource to be painted on the Canvas fills the Canvas completely, and so as a result the background color will not be displayed. 
 * The [`spatialScale`][prezi-40-model-spatialScale] property on the Canvas provides a corresponding real-world scale for a unit of the Canvas coordinate system, allowing clients to provide scale information to users, for example by an on-screen virtual ruler. If presenting more than one Canvas together, a client can use [`spatialScale`][prezi-40-model-spatialScale] to show the Canvases correctly sized relative to one another.
 
 {: .callout}
 
 __Definitions__<br/>
 Classes: [Manifest][prezi-40-model-Manifest], [Canvas][prezi-40-model-Canvas], [AnnotationPage][prezi-40-model-AnnotationPage], [Annotation][prezi-40-model-Annotation], [Agent][prezi-40-model-Agent]<br/><br/>
-Properties: [id][prezi-40-model-id], [type][prezi-40-model-type], [label][prezi-40-model-label], [metadata][prezi-40-model-metadata], [summary][prezi-40-model-summary], [rights][prezi-40-model-rights], [homepage][prezi-40-model-homepage], [thumbnail][prezi-40-model-thumbnail], [provider][prezi-40-model-provider], and [service][prezi-40-model-Service]
+Properties: [id][prezi-40-model-id], [type][prezi-40-model-type], [label][prezi-40-model-label], [metadata][prezi-40-model-metadata], [summary][prezi-40-model-summary], [rights][prezi-40-model-rights], [homepage][prezi-40-model-homepage], [thumbnail][prezi-40-model-thumbnail], [provider][prezi-40-model-provider], [service][prezi-40-model-Service], and [backgroundColor][prezi-40-model-backgroundColor]
 {: .note}