Demo Canvas 059

Note: this canvas will use the display-p3 color space where the device, browser and display screen all support it.

Test purpose

Create a canvas; fill it with blocks whose fillStyle attributes have been populated with a range of different CSS color value strings.
Check that the expected color displays in the canvas.
For comparison, create a set of <div> elements with their backgroundColor values set to those same color strings.

For browsers that do not currently support a given color space (eg: Firefox), SC will calculate the required color space color (for all permitted formatting values) and render the color on the canvas using the sRGB color space.

Touch test: not required

Annotated code

red

orange

gold

#f09

#FF0099

#ff009980

rgb(255, 0, 153)

rgb(2.55e2, 0e0, 1.53e2)

rgb(255 0 153)

rgba(100%, 0%, 60%, 1)

rgba(51 170 51 / 0.4)

rgba(51, 170, 51.6, 80%)

hsl(30, 100%, 50%)

hsl(30 100% 50%)

hsl(30.0 100% 50% / 60%)

hsla(30, 100%, 50%, 0.6)

hsla(30 100% 50% / 0.6)

hsla(30.2 100% 50% / 60%)

hwb(90 10% 10%)

hwb(90deg 10% 10% / 0.5)

hwb(.25turn 0% 40% / 50%)

lab(29.2345% 39.3825 20.0664)

lab(52.2345% 40.1645 59.9971)

lab(52.2345% 40.1645 59.9971 / .5)

lch(29.2345% 44.2 27)

lch(52.2345% 72.2 56.2)

lch(52.2345% 72.2 56.2 / .5)

oklab(59.686% 0.1009 0.1192)

oklab(0.65125 -0.0320 0.1274)

oklab(42.1% 41% -25% / .5)

oklch(59.686% 0.15619 49.7694)

oklch(0.65125 0.13138 104.097)

oklch(42.1% 48.25% 328.4 / .5)

Scrawl-canvas v8 - Canvas test 059

CSS color space strings - rgb-key, rgb-hex, rgb(), rgba(), hsl(), hsla(), hwb(), lab(), lch(), oklab(), oklch()

Test purpose