Winwheel.js tutorial: #7 Colours, Lines, and Fonts
In this tutorial I will explain the options when it comes to segment fill colours, segment lines, and text colour, lines and fonts.
The properties involved are:
- fillStyle (for segments) and textFillStyle (for text)
- strokeStyle and textStrokeStyle
- lineWidth and textLineWidth
- textFontFamily
- textFontSize
- textFontWeight
These parameters can be set globally for the whole wheel, or individually for each segment.
fillStyle & textFillStyle
This is basically the fill colour, so for segments this means the colour of the segment, and for text this is the font colour.
Valid values for fillStyle are anything that the HTML 5 canvas specification supports for fillStyle, which at time of writing are:
- CSS colour values
- Hex Colour Codes
- Red Green Blue (RGB)
- Red Green Blue Alpha (RBGA)
- Hue Saturation Lightness (HSL)
- Hue Saturation Lightness Alpha (HSLA)
- Named colours
- Gradients (linear or radial)
- Patterns
Note that when applying the fillStyle to a segment you use the fillStyle property, and when applying it to text you use the textFillStyle property as seen the following example...
let theWheel = new Winwheel({
'numSegments' : 6,
'segments' :
[
{'fillStyle' : '#0D56A6', 'text' : 'Hex code'},
{'fillStyle' : 'rgb(200, 50, 75)', 'text' : 'RGB'},
{'fillStyle' : 'rgba(200, 50, 75, 0.5)', 'text' : 'RGB Alpha'},
{'fillStyle' : 'hsl(120,100%,25%)', 'text' : 'HSL'},
{'fillStyle' : 'hsla(120,100%,25%, 0.3)', 'text' : 'HSL Alpha'},
{'fillStyle' : 'aqua', 'text' : 'Named Colour'}
]
});
// Remember that the property for text is textFillStyle.
theWheel.segments[1].textFillStyle = '#FFFFFF';
theWheel.segments[2].textFillStyle = 'rgb(100, 20, 10)';
theWheel.segments[3].textFillStyle = 'rgba(100, 10, 10, 0.5)';
theWheel.segments[4].textFillStyle = 'hsl(200,15%,50%)';
theWheel.segments[5].textFillStyle = 'hsla(200,10%,25%, 0.8)';
theWheel.segments[6].textFillStyle = 'red';
theWheel.draw();
Background lines added so you can see the alpha at work
Gradients and patterns are also possible but a lot more tricky so not covered here.
strokeStyle & textStrokeStyle
This is the colour, gradient, or pattern for the lines around the segments or the lines around text. The same values as fillStyle are supported.
Note that in order for the lines (strokes) to appear around the segments or text the lineWidth for segments or textLineWidth for text needs to be set to something greater than 0.
By default the strokeStyle of 'black' is set for segments with a lineWidth of 1, so if you don't want any lines around the segments set the strokeStyle to null and the lineWidth to 0.
No textStrokeStyle or textLineWidth is set by default since text lines tend only to look good at larger font sizes and when certain fonts are used.
let strokeSegment = new Winwheel({
'numSegments' : 6,
'lineWidth' : 8,
'segments' :
[
{'strokeStyle' : '#0D56A6', 'text' : 'Hex code'},
{'strokeStyle' : 'rgb(200, 50, 75)', 'text' : 'RGB'},
{'strokeStyle' : 'rgba(200, 50, 75, 0.5)', 'text' : 'RGB Alpha'},
{'strokeStyle' : 'hsl(120,100%,25%)', 'text' : 'HSL'},
{'strokeStyle' : 'hsla(120,100%,25%, 0.3)', 'text' : 'HSL Alpha'},
{'strokeStyle' : 'aqua', 'text' : 'Named Colour'}
]
});
let strokeText = new Winwheel({
'numSegments' : 6,
'segments' :
[
{'textStrokeStyle' : '#0D56A6', 'text' : 'Hex code'},
{'textStrokeStyle' : 'rgb(200, 50, 75)', 'text' : 'RGB'},
{'textStrokeStyle' : 'rgba(200, 50, 75, 0.5)', 'text' : 'RGB Alpha'},
{'textStrokeStyle' : 'hsl(120,100%,25%)', 'text' : 'HSL'},
{'textStrokeStyle' : 'hsla(120,100%,25%, 0.3)', 'text' : 'HSL Alpha'},
{'textStrokeStyle' : 'aqua', 'text' : 'Named Colour'}
]
});
|
Segment - strokeStyle
|
Text - textStrokeStyle
|
Known issue with segment lines
As you might have noticed, there is an issue when the segment line colours different
in that they overlap, so later segments in wheel, for example the redish bordered "RGB" segment
overwrites the blue of the first "Hex Code" segment.
Unfortunately this is due to the way HTML5 canvas works, where it draws half of the line inside the shape and half outside of the shape. Currently there is no option I have found in the canvas specification to tell it to draw lines entirely inside shapes.
Also
If you were wondering, yes it is possible to just have the text or segment lines drawn
without any fill, to do this simply set the fillStyle or textFillStyle to null.
lineWidth & textLineWidth
As mentioned this is tied in with strokeStyle, without a line width no lines will be drawn even if you have specified a strokeStyle.
To specify a lineWidth simply set it to how many pixels thick you want the line to be. You don't need to add a 'px' to the end, valid values are positive whole (int) or decimal (floating point) numbers.
The lineWidth can be different for each segment if desired, and of course you can set the textLineWidth to be different for each segment text if wanted. Normally however, you would specify this globally by passing it as a parameter to the Winwheel constructor.
textFontFamily, textFontSize, and textFontWeight
Use textFontFamily to specify the font you want the text to be rendered in. These are the standard named fonts also used in CSS, for example Arial (the default), Verdana, Georgia, "Times New Roman", and so on. You should stick to Web Safe Fonts unless creating a wheel that will run on a machine that you are certain has the desired font.
Use textFontSize to specify the size of the font in pixels, this should just be a number - whole or decimal, do not add 'px' at the end. The default is 20.
Use textFontWeight to specify the weight of the font (boldness). The default is 'bold' so if you don't want that set the font weight to 'normal'. The standard CSS font-weight values are usable such as normal, bold, bolder, lighter, and 100 to 900.
let familyWheel = new Winwheel({
'numSegments' : 5,
'segments' :
[
{'textFontFamily' : 'Arial', 'textFontSize' : 40, 'text' : 'Arial'},
{'textFontFamily' : 'Georgia', 'textFontSize' : 20, 'text' : 'Georgia'},
{'textFontFamily' : 'Verdana', 'textFontSize' : 15, 'text' : 'Verdana'},
{'textFontFamily' : 'Times', 'textFontSize' : 56, 'text' : 'Times'},
{'textFontFamily' : 'Impact', 'textFontSize' : 30, 'text' : 'Impact'}
]
});
let boldWheel = new Winwheel({
'numSegments' : 5,
'textFontSize' : 36,
'textMargin' : 12,
'segments' :
[
{'textFontWeight' : 'normal', 'text' : 'Normal'},
{'textFontWeight' : 'bold', 'text' : 'Bold'},
{'textFontWeight' : 'bolder', 'text' : 'Bolder'},
{'textFontWeight' : 'lighter', 'text' : 'Lighter'},
{'textFontWeight' : 800, 'text' : '800'}
]
});
|
textFontFamily and labelFontSize
|
textFontWeight
|
|
Previous: < #6 Text Alignment and Orientation |
Next: #8: Wheel Radius and Center Point > |