JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    smileys = [];

canvas.width = canvas.height = 500;

//init smileys
for(var i = 0; i < 800; i++){
    smileys[i] ={};
    smileys[i].x = Math.random()*400;
    smileys[i].y = Math.random()*400;
}

function update(){
    ctx.clearRect(0,0,500,500);
    for(var i = 0, len = smileys.length; i < len; i++){
        var x = smileys[i].x++,
            y = smileys[i].y++;
        
        if( x>450){
            smileys[i].x=0;
        }
        
        if( y>450){
            smileys[i].y=0;
        }
        
        ctx.fillStyle = "#FFA812";
        ctx.beginPath();
        ctx.arc(x+75,y+75,30,0,Math.PI*2,true); // Outer circle
        ctx.fill();
        ctx.closePath();
        
        ctx.beginPath();
        ctx.moveTo(x+110,y+75);
        ctx.arc(x+75,y+75,25,0,Math.PI,false);   // Mouth
        ctx.closePath();
        ctx.fillStyle = "#000";
        ctx.fill();
        
        ctx.beginPath();
        ctx.moveTo(x+65,y+65);
        ctx.arc(x+60,y+65,5,0,Math.PI*2,true);  // Left eye
        ctx.moveTo(x+95,y+65);
        ctx.arc(x+90,y+65,5,0,Math.PI*2,true);  // Right eye
        ctx.closePath();
        ctx.fill();
        

    }
 setTimeout(update,10);
}

update();