JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<canvas id="canvas" width="800" height="600"></canvas>

CSS

body{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
canvas{
    position:absolute;
    left:0px;
    top:0px;
    margin:0px;
    padding:0px;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

JavaScript

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

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

// image and canvas vars
var imgToDraw = null,
    imageCanvas = null,
    iCtx = null,
    imageData = null,
    imagePixData = null,
    imgWidth = null,
    imgHeight = null;

// store our canvas width and height for faster access
var width = 800,
    height = 600;

// create and initialize our objects
for (var i = 0; i < numberOfObjects; i++) {
    objects.push({
        angle: Math.random() * 360,
        x: 100 + (Math.random() * canvas.width/2),
        y: 100 + (Math.random() * canvas.height/2),
        speed: 1 + Math.random() * 20
    });
}

function draw() {
    // create new Image data
    var canvasData = ctx.createImageData(canvas.width, canvas.height),
        // get the pixel data
        cData = canvasData.data;
    
    // iterate over the opbects
    for (var nObject = 0; nObject < numberOfObjects; nObject++) {
        // for ref the entity
        var entity = objects[nObject],
            // some fancy nancy stuff.
            velY = Math.cos(entity.angle * Math.PI / 180) * entity.speed,
            velX = Math.sin(entity.angle * Math.PI / 180) * entity.speed;

        entity.x += velX;
        entity.y -= velY;

            // now iterate over the image we stored 
            for (var w = 0; w < imgWidth; w++) {
                for (var h = 0; h < imgHeight; h++) {
                    // make sure the edges of the image are still inside the canvas
                    if (entity.x + w < width && entity.x + w > 0 &&
                        entity.y + h > 0 && entity.y + h < height) {
                        //...