Share the very beautiful Matrix HTML Code written in Canvas

If you have ever seen the movie The Matrix (Maxtrix), you must be very fond of the effects in the film. Featuring a black background and green letters falls like a waterfall. A mysterious space will appear before your eyes. If you want to have sex with your girlfriend, use this matrix html code to open the file, then press F11 for Full Screen. Then, press the keyboard to appear dangerous. You will be admired by your girlfriend :)).

In this article, AnonyViet will Share the beautiful matrix HTML Code that I have collected. In addition, you can see other HTML Codes that AnonyViet has shared at Section Tips – Code

Share Code HTML Very beautiful matrix written in Canvas on HTML5

With HTML5 has strongly supported writing code and supporting graphics by Code. So, with just a few basic lines of code with canvas, you can completely create an html file with full graphic elements without the support of other languages.

If the code copy below fails, download the Matrix Code here

The code below is called “Matrix Background” will describe the simple matrix effect:

<html>
    <head>
        <style>
            
            /*basic reset */
            
            *{
                margin: 0;
                padding: 0;
            }
            
            body {background: black;}
            canvas {display:block;}
        
        </style>
    </head>
    <body>
    
        <canvas id="c"></canvas>
        
        <script>
        // geting canvas by id c
        var c = document.getElementById("c");
        var ctx = c.getContext("2d");

        //making the canvas full screen
        c.height = window.innerHeight;
        c.width = window.innerWidth;

        //characters - taken from the unicode charset
        var matrix = "AnonyViet Dep Trai, We are AnonyViet";
        //converting the string into an array of single characters
        matrix = matrix.split("");

        var font_size = 10;
        var columns = c.width/font_size; //number of columns for the rain
        //an array of drops - one per column
        var drops = [];
        //x below is the x coordinate
        //1 = y co-ordinate of the drop(same for every drop initially)
        for(var x = 0; x < columns; x++)
            drops[x] = 1; 

        //drawing the characters
        function draw()
        {
            //Black BG for the canvas
            //translucent BG to show trail
            ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
            ctx.fillRect(0, 0, c.width, c.height);

            ctx.fillStyle = "#0F0"; //green text
            ctx.font = font_size + "px arial";
            //looping over drops
            for(var i = 0; i < drops.length; i++)
            {
                //a random chinese character to print
                var text = matrix[Math.floor(Math.random()*matrix.length)];
                //x = i*font_size, y = value of drops[i]*font_size
                ctx.fillText(text, i*font_size, drops[i]*font_size);

                //sending the drop back to the top randomly after it has crossed the screen
                //adding a randomness to the reset to make the drops scattered on the Y axis
                if(drops[i]*font_size > c.height && Math.random() > 0.975)
                    drops[i] = 0;

                //incrementing Y coordinate
                drops[i]++;
            }
        }

        setInterval(draw, 35);

        
        </script>
    </body>
</html>

Copy the above code into notepad. Replace the content in quotes, in the line:

var matrix = "AnonyViet Dep Trai, We are AnonyViet";

to what you want to display on the screen. Afterward save to a *.html file and open it to enjoy. So you have a very nice matrix file in HTML5.