JSFiddle - React, Tailwind, and code Playground

by makurell

HTML

<canvas id='c'></canvas>

JavaScript

var c = document.getElementById('c'),
cx = c.getContext('2d');

var t = 0; //gametime
var speed = 1; //gamespeed
var fps = 120;//max is 1000
var f = 1000.0/fps*speed;

(function() {        
  	function resizeCanvas() {
      c.width = window.innerWidth;
      c.height = window.innerHeight;
      draw(); 
    }
    window.addEventListener('resize', resizeCanvas, false);
    resizeCanvas();
    
    init();
    var timer=setInterval(function(){
      clear();
    	update();
      draw();
      t+=f;
    },1000.0/fps);
    
    function init(){
    }
    
    function update(){
    }
    
    function f(x){
    return -(
          Math.pow(x,2/3) + Math.pow(Math.pow(x,4/3)-4*(x*x-1),1/2)
            )/2;
    }
    function g(x){
    return -(
          Math.pow(x,2/3) - Math.pow(
                        Math.pow(x,4/3)-4*(x*x-1),1/2)
              )/2;
    }
    
    function draw(){
    	var x = 300;
      var y = 300;
      var s = 100;
      cx.beginPath();
      for(var i=-1.2*s+x;i<1.2*s+x;i+=1){
      //for(var i=-600;i<600;i+=0.5){
        //cx.lineTo(i,s*f((1/s)*i-(x/s))+y);
        cx.fillRect(i,s*f(((1/s)*i)-(x/s))+y,1,1);
        cx.fillRect(i,s*g(((1/s)*i)-(x/s))+y,1,1);
        console.log(i)
        //cx.fillRect(i,s*Math.pow((1/s)*i-(x/s),2)+y,1,1);
        }
      cx.closePath();
      cx.stroke();
          }
    
    function clear(){
    }
})();