JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Two Canvas</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
        <script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
        <canvas id="canvas">Not supported.</canvas>
    </body>
    </html>

JavaScript

window.addEventListener( 'load', eventWindowLoaded, false );
            function eventWindowLoaded() {
                canvasApp();
            }

            function canvasSupport () {
                return Modernizr.canvas;
            }

            function canvasApp() {

                if( !canvasSupport() ) {
                    return;
                } else {
                    var theCanvas = document.getElementById("canvas");
                    var context_1 = theCanvas[0].getContext("2d");
                        var context_2 = theCanvas[1].getContext("2d");
                }
                drawScreen();

                var el = document.getElementById("canvas");
                el.addEventListener('click', function(e) {
                    var elm = document.getElementById("canvas"), cn = elm.className;
                    if( 'transformNeg360degY' === cn ) {
                        document.getElementById("canvas").className = '';//transform180degY';
                    } else {
                        el.className = 'transformNeg360degY';
                    }

            
                } );


                function drawScreen() {

                    console.log('123123', context_1, context_2);




                }
            }