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:

  1. fillStyle (for segments) and textFillStyle (for text)
  2. strokeStyle and textStrokeStyle
  3. lineWidth and textLineWidth
  4. textFontFamily
  5. textFontSize
  6. 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:


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...


    var 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
Canvas not supported, please user another browser.

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.


    var 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'}
        ]
    });

    var 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
Canvas not supported, please user another browser.
Text - textStrokeStyle
Canvas not supported, please user another browser.

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.


    var 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'}
        ]
    });

    var 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
Canvas not supported, please user another browser.
textFontWeight
Canvas not supported, please user another browser.


Previous:
< #6 Text Alignment and Orientation
Next:
#8: Wheel Radius and Center Point >