JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<canvas id="canvas"></canvas>
<div id="info"></div>

CSS

html, body{
  margin:0px;
  padding:0px;
  background: #fff;
}
canvas{
  background: #000;
  position:absolute;
  top:0;
  left:0;
}
#info{
  position:absolute;
  top:5px;
  left:5px;
  color:#fff;
  font-size:small;
}

JavaScript

var FPS = 6000;
var _width = 450;
var _height = 450;
var particleNum = 1000;

var CLOCK_VIEW = 0,
    TEXT_VIEW = 1;
var nowDisp = CLOCK_VIEW;
var particles = [];
var ct = document.createElement('canvas');
var ctx = ct.getContext('2d');
ctx.fillStyle = '#fff';

var canvas = document.getElementById("canvas");
var info = document.getElementById("info");

ct.width = canvas.width = _width;
ct.height = canvas.height = _height;
canvas.onclick = mouseClick;

var cc = canvas.getContext("2d");
cc.fillStyle = 'rgba(255,255,255,0.01)';
cc.fillRect(0, 0, _width, _height);
bit = cc.getImageData(0, 0, _width, _height);
data = bit.data;
cc.clearRect(0, 0, _width, _height);
cc.fillStyle = "rgb(255, 255, 255)";

var updateState = false;
var textData;
var prev_time;
var textWidth;
var textHeight;
var setX, setY;

function setPixel(x, y) {
    var idx = ((x | 0) + (y | 0) * _width) * 4;
    data[idx + 3] = 255;
}

function delPixel(x, y) {
    var idx = ((x | 0) + (y | 0) * _width) * 4;
    data[idx + 3] = 0;
}

function faidout() {
    for (var i = 3, l = data.length; i < l; i += 4) {
        var a = data[i];
        if (a !== 0) {
            if (a < 36) {
                data[i] = 0;
            } else if (a < 66) {
                data[i] *= 0.96;
            } else {
                data[i] *= 0.7;
            }
        }
    }
}

create();


var last = Date.now(),
    count = 0;
var timer //= setInterval(process, 1000 / 60);

function create() {
    ctx.clearRect(0, 0, _width, _height);


        // テキスト
        textSize = 60;
        text = 'あ';
        textWidth = textSize * text.length;
        textHeight = textSize;
        setX = (_width / 2) - ( textWidth / 2) + 15;
        setY = _height / 2 - textSize / 2;
console.log(setX, setY  );

        ctx.font = textSize + "px sans-serif";
        ctx.textBaseline = "top";
        ctx.fillStyle = '#fff';
        ctx.fillText(text, setX, setY);

        updateState = false;

        // パーティクルを配置する座標を取得する
        textData =...