An example of using the RGraph.text2() function to produce HTML5 canvas text

An example of using the RGraph.text2() function to incorporate extra options for your text such as carriage returns and bounding boxes

The RGraph.text2() function is a wrapper function that encapsulates a lot of the canvas text functionality and provides things such as bounding boxes, horizontal alignment, vertical alignment and support for carriage returns. It also returns the coordinates and dimensions of the text.

[No canvas support]
<script src="RGraph.common.core.js"></script>
    var canvas  = document.getElementById('cvs'),
        context = canvas.getContext('2d');
    RGraph.text2(context, {
        x:                         5, // REQUIRED
        y:                         5, // REQUIRED
        text:                      'Some example\r\ntext with a marker\r\nshowing the coords\r\ngiven', // REQUIRED
        font:                      'Arial',
        size:                      16,  // Default is 10
        marker:                    true, // Default is false
        valign:                    'bottom',
        halign:                    'left'
        bold:                      false,
        angle:                     0, // DEGREES
        bounding:                  false,
        'bounding.stroke':         'black,
        'bounding.fill':           'rgba(255,255,255,0.7)',
        'bounding.shadow':         false,
        'bounding.shadow.color':   '#ccc',
        'bounding.shadow.blur':    3,
        'bounding.shadow.offsetx': 3,
        'bounding.shadow.offsety': 3,
        'bounding.linewidth':      1

« Back to HTML5 canvas text article