Demo Canvas 059

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.

Note that browser support for different color spaces is somewhat patchy. Browsers that do support the newer color spacess in CSS may not support them in <canvas> elements.

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%)

lch(29.2345% 44.2 27)

lch(52.2345% 72.2 56.2)

lch(52.2345% 72.2 56.2 / .5)

lab(29.2345% 39.3825 20.0664)

lab(52.2345% 40.1645 59.9971)

lab(52.2345% 40.1645 59.9971 / .5)

Scrawl-canvas v8 - Canvas test 059

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

Test purpose