JavaScript Canvas Experiment [Showcase] [Completely Awesome]

ContraHacker · November 2, 2017

Hey guys!

I'm excited to share with you all, what I have came up with in a time frame of under 1 hour.

<html>
 <head>
    <title>Random Canvas Renderer</title>
    <script type="text/javascript">

        function render(){
            
        var xD = document.getElementById('thisCanvas');
        canvas = xD.getContext('2d');
            
            canvas.fillStyle = "gray";
            
            var edge = 3;
            
            var xBeg = Math.floor((Math.random() * 1920) + 1);
            var yBeg = Math.floor((Math.random() * 1014) + 1);
            
            canvas.beginPath();
            canvas.moveTo(xBeg,yBeg);
            
            for (x = 0; x < edge; x++){
                var xPos = Math.floor((Math.random() * 1890) + 1);
                var yPos = Math.floor((Math.random() * 990) + 1);
                
                var colorRandom = '#'+Math.floor(Math.random()*16777215).toString(16);
                canvas.strokeStyle = colorRandom;
                canvas.fillStyle = colorRandom;
                
                canvas.lineTo(xPos, yPos);
                canvas.fill();
        }
               canvas.closePath();
    }
        
        window.addEventListener("load", render, false);
        
    </script>
 </head>
 <body>
    <canvas style = "border: solid 1px;" id = "thisCanvas" width="1890" height="990" ></canvas>
 </body>
</html>