<canvas> fillStyle og strokeStyle - JavaScript

Vælg farve til det som skal tegnes på <canvas> med JavaScript fillStyle og strokeStyle attributter

Introduktion

fillStyle er farven som bruges til at udfylde figuren.
strokeStyle er farven som bruges på linjen omkring figuren.

Standard værdien for både fillStyle og strokeStyle er #000000 hvilket er sort.

Hexadecimale værdier

Farver kan angives med RGB hexadecimale værdier.
Værdien starter med et #-tegn for at angive at det efterfølgende er en hexadecimal værdi også 6 tegn i alt (2 tegn for hver farve, rød, grøn, blå).
Tegnene er 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F (16 i alt).
Jo højere værdi man bruger til hver farve jo mere lys bliver farven.
#FF0000 betyder rød = 100%, grøn = 0%, blå = 0%.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Hexadecimale værdier 3 tegn

Der findes en kortere måde at skrive hexadecimale værdier på hvor der bruges 3 tegn i stedet for 6 tegn.
Det giver et mindre antal farver at vælge imellem men det er hurtigere at skrive og redigere.
#f00 svarer til at skrive #ff0000.
Browseren understøtter ikke <canvas>
Resultatet ovenfor er skabt af følgende kode

Farvenavne

Farvenavne som red, lime, pink, brown kan bruges ligesom man kender fra CSS.

CreatePattern

Man kan også bruge en billedfil i stedet for en farve.
Det kan for eksempel bruges til fliselægge et billede på hele baggrunden.
Siden er sidst opdateret mandag 25. juni 2018