How to use repeating canvas patterns

Summary: This guide shows you how you can use repeating patterns as colors on your charts. Small images are used which are repeated for you to create the larger pattern.

Canvas has the ability to use repeating patterns as colors. These images are typically quite small and repeat to fill whatever the space is required to be filled. A common use is as backgrounds - for example desktop wallpaper. You can use patterns as you would normal colors although you should be aware that some of the charts have quirks in the color handling when the colors are objects and not strings or text. As such you may need to give an array of colors instead of just the pattern - even if there is only one pattern to be used (the Line chart is an example of this): 

line.set({
    // Use an array of colors
    colorsFill: [myPattern]
    
    // Instead of this
    // colorsFill: myPattern
})

A Line chart example of patterns

As mentioned above with the Line chart, because of its internal handling of colors, the pattern, when given as the fill, should be an array.

[No canvas support] 
<script>
    // Start by creating the chart but not creating or assigning the pattern yet
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,8,6,5,3,5,1],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            filled: true,
            colors: ['black'],
            linewidth: 5,
            tickmarksStyle: null,
            spline: true,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            marginInner: 5,
            textSize: 14
        }
    });
    
            
            
            
    // Now create a pattern using an image object and the standard canvas API.
    // This pattern is then set as the fill in the Line chart
    img = new Image();
    img.src = '/images/pattern.png';
    
    
    
    
    // When the pattern image that we're using has loaded - create the pattern
    // and set it on the Line chart object. Note that the draw() function is now
    // called (not above)
    img.onload = function ()
    {
        var pattern = line.context.createPattern(this, 'repeat');
    
        // Set the pattern on the Line chart that was created above. Note
        // the square braces around the pattern variable. This is necessary with
        // the Line chart - but not all chart types
        line.set({
            filledColors: [pattern]
        }).draw();
    }
</script>

A Bar chart example of patterns

Here's a Bar chart example of patterns. Remember that patterns can be used with most (if not all) of the chart types that RGraph has. 

<script>
    // Create the bar chart but don't draw() it yet
    bar = new RGraph.Bar({
        id: 'cvs2',
        data: [4,8,6,3,5,3,1],
        options: {
            xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
            shadowOffsetx: 2,
            shadowOffsety: 2,
            shadowBlur: 2,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textSize: 14
        }
    });




    // Create the pattern using a different image. It's the same procedure though.
    img2 = new Image();
    img2.src = '/images/pattern2.jpg';




    // When the pattern image that we're using has loaded - create the pattern
    img2.onload = function ()
    {
        var pattern = line.context.createPattern(this, 'repeat');
    
        // Set the pattern on the Bar chart. The Bar chart doesn't use
        // the fillstyle property - it uses the colors array
        bar.set({
            colors: [pattern]
        }).draw();
    }
</script>
[No canvas support]

Note