How to use repeating canvas patterns

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 - eg desktop wallpaper. You can use patterns as you would normal colors although you should be aware that some of the chart have quirks in the color handling when the colors are objects and not strings or text and 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.

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

Note

• You don't have to use an image that repeats - any image can be used.