JSFiddle - React, Tailwind, and code Playground

by Shashank D

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 < 200; i++){
    smileys[i] ={};
    smileys[i].x = Math.random()*400;
    smileys[i].y = Math.random()*400;
}

// cach the smiley
var canvasTemp = document.createElement("canvas"),
    tCtx = canvasTemp.getContext("2d");

canvasTemp.width = canvasTemp.height = 150;

tCtx.fillStyle = "#FFA812";
tCtx.beginPath();
tCtx.arc(75,75,30,0,Math.PI*2,true); // Outer circle
tCtx.fill();
tCtx.closePath();

tCtx.beginPath();
tCtx.moveTo(110,75);
tCtx.arc(75,75,25,0,Math.PI,false);   // Mouth
tCtx.closePath();
tCtx.fillStyle = "#000";
tCtx.fill();

tCtx.beginPath();
tCtx.moveTo(65,65);
tCtx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
tCtx.moveTo(95,65);
tCtx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
tCtx.closePath();
tCtx.fill();

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.drawImage(tCtx.canvas, x, y);
    }
    setTimeout(update,10);
}

update();