# An SVG Line with a simple look

- How to get transparent tickmarks using the canvas Line chart

## How to get transparent tickmarks using the canvas Line chart

You may have noticed that on the chart above the center of the tickmarks are not transparent - they're just colored black in order to make them blend in with the rest of the chart.

Making them transparent is more complicated than you might think for these reasons:

- If you use a transparent fill then the Line itself would still be visible.
- If you use a black fill it overwrites the background grid (this is the first chart).
- If you use the `globalCompositeOperation` option but with only one `canvas` it clears the background grid - so the line can't be seen and nor can the grid. The result would be similar to the first situation in this list.

The solution here is to use layers. "But wait! `canvas` doesn't have layers!" you might cry. And yes - you would be correct - but they can be simulated by using - in this case - multiple `canvas` tags.

So there are two `canvas` tags being utilised here (positioned one in front of the other) - one on to which the background is drawn and a second on to which the lines are drawn. When the insides of the tickmarks are cleared to transparency then the `canvas` at the back shows through. And that is the `canvas` that has the background grid on it.

There's more code required than a regular chart (as you might imagine) - but as you can see it's not a lot more and nor is it complicated. Feel free to copy and paste the code.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

    <div style="position: relative; background-color: black; width: 750px; height: 250px">
        <canvas id="cvs1" width="750" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas>
        <canvas id="cvs2" width="750" height="250" style="position: absolute; top: 0; left: 0">[No canvas support]</canvas>
    </div>

This is the code that generates the chart - it should be placed AFTER the `div` tag:

    <script>
        line1 = new RGraph.Line({
            id: 'cvs1',
            data: [null,null,null,null,null],
            options: {
                axes: false,
                backgroundGridColor: '#999',
                yaxisLabels: false,
                 arksSize: 9
            }
        }).draw();

        var line2 = new RGraph.Line({
            id: 'cvs2',
            data: [
                [9,9,0,9,0],
                [6,7,10,5,0],
                [9,4,0,3,4]
            ],
            options: {
                colors: ['#cc0','blue','red'],
                axes: false,
                linewidth: 3,
                backgroundGrid: false,
                xaxisLabels: ['5.0','6.0','7.0','8.0','9.0'],
                textColor: '#ccc',
                tickmarksSize: 6,
                tickmarksStyle: function (obj, data, value, index, x, y, color, prevX, prevY)
                {
                    // Draw the fill of the tickmark
                    obj.path(
                        'gco destination-out b a % % % 0 6.29 false f red s % gco source-over',
                        x, y, obj.get('tickmarksSize') - 1, color
                    );

                    // This draws the outline of the tickmark
                    obj.path(
                        'b lw 2 a % % % 0 6.29 false s %',
                        x, y, obj.get('tickmarksSize'), color
                    );
                },
                tickmarkSize: 6,
                responsive: [
                    {maxWidth:null,width:650,height:250,options:{textSize: 12,tickmarksSize:5},parentCss:{'float':'right'},callback:function (obj) {},callback:function (obj){var canvas = document.getElementById('cvs1');canvas.width  = 650;canvas.height = 250;var div = canvas.parentNode.parentNode;div.style.width  = '650px';div.style.height = '250px';RGraph.cache = [];RGraph.redraw();}},
                    {maxWidth:800,width:450,height:200,options:{textSize: 10,tickmarksSize:4},parentCss:{'float':'none'},callback:function (obj){var canvas = document.getElementById('cvs1');canvas.width  = 450;canvas.height = 200;var div = canvas.parentNode.parentNode;div.style.width  = '450px';div.style.height = '200px';RGraph.cache = [];RGraph.redraw();}}
                ]
            }
        }).draw();
    </script>