Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

How to write Dash elements over a JavaScript background?

I have a local CSS file and some JavaScript code to create an animated background inside an assets directory inside my working directory. When I setup my Dash app like the following, I see my animated background without trouble, but none of the Dash app elements that I have (such as the tabs from Dash’s example) are visible. The JavaScript is rendered onto the “layer1” canvas. Even if I specify style={'zIndex':10000} on mydcc.Tabs, it still doesn’t show up. Code is below. Thoughts?

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

app.title = "YadaYadaYada"
app.index_string = '''
<!DOCTYPE html>
<html>
    <head>
        {%css%}
        <canvas id = 'layer1'></canvas>
        {%scripts%}
        {%config%}
    </head>
    <body>
        {%app_entry%}
    </body>
</html>
'''

app.layout = html.Div([
    html.H1('Dash Tabs component demo', style={
            'textAlign': 'center', 'margin': '48px 0', 'fontFamily': 'system-ui'}),
    dcc.Tabs(id="tabs", children=[
        dcc.Tab(label='Tab one', children=[
            html.Div([
                dcc.Graph(
                    id='example-graph',
                    figure={
                        'data': [
                            {'x': [1, 2, 3], 'y': [4, 1, 2],
                                'type': 'bar', 'name': 'SF'},
                            {'x': [1, 2, 3], 'y': [2, 4, 5],
                             'type': 'bar', 'name': u'Montréal'},
                        ],
                        'layout': {
                            'title': 'Dash Data Visualization'
                        }
                    }
                )
            ])
        ]),
        dcc.Tab(label='Tab two', children=[
            html.Div([
                html.H1("This is the content in tab 2"),
                html.P("A graph here would be nice!")
            ])
        ]),
        dcc.Tab(label='Tab three', children=[
            html.Div([
                html.H1("This is the content in tab 3"),
            ])
        ]),
    ],
        style={
        'fontFamily': 'system-ui'
    },
        content_style={
        'borderLeft': '1px solid #d6d6d6',
        'borderRight': '1px solid #d6d6d6',
        'borderBottom': '1px solid #d6d6d6',
        'padding': '44px'
    },
        parent_style={
        'maxWidth': '1000px',
        'margin': '0 auto'
    }
    )
])


if __name__ == '__main__':
    app.run_server(debug=True)