JSFiddle - React, Tailwind, and code Playground

by garmashnikolay

HTML

<canvas id="context" width="400" height="200"></canvas>

SCSS

#context{
  background: #eee;
}

CoffeeScript

document.onreadystatechange = (event) ->
  if document.readyState == "complete"
    initDraw()
    
scene =
  ball_speed: 2
  getY: (x) ->
    -((x+70)/10) * Math.sin(x/10) + (scene.height / 2)
    
class Ball
   constructor: (start_point, radius, context) ->
      this.x = start_point[0]
      this.y = start_point[1]
      this.radius = radius
      this.context = context
   draw: ->
      this.context.beginPath()
      this.context.fillStyle = "red"
      this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
      this.context.fill()
   setPos: (pos) ->
      this.x = pos[0]
      this.y = pos[1]
   getPos: ->
      [this.x, this.y]
        

    
render = () ->
  scene.ctx.clearRect(0, 0, scene.width, scene.height)
  scene.ctx.beginPath()
  scene.ctx.strokeStyle = "#cccccc"
  scene.ctx.moveTo(0+ 0.5 , scene.height / 2 + 0.5)
  scene.ctx.lineTo(scene.width+ 0.5 , scene.height / 2 + 0.5)
  scene.ctx.lineWidth = 1
  scene.ctx.stroke()
  scene.ctx.beginPath()
  scene.ctx.strokeStyle = "#000000"
  for t in [0..scene.width] by 3
    _y = scene.getY(t)
    new_point = [t, _y]
    scene.ctx.lineTo(new_point[0] + 0.5, new_point[1] + 0.5)
  scene.ctx.stroke()
  _pos = scene.ball.getPos()
  if _pos[0] <= scene.width
    _new_x = _pos[0] + scene.ball_speed
    _new_y = scene.getY(_new_x)
    scene.ball.setPos([_new_x, _new_y])
    scene.ball.draw()
    requestAnimationFrame(render)
  else
    console.log "end"
  
    
initDraw = ->
  canvas = document.getElementById("context")
  ctx = canvas.getContext("2d")
  scene.ctx = ctx
  scene.width = canvas.width
  scene.height = canvas.height
  scene.ball = new Ball([0, scene.height/2], 10, scene.ctx)
  render()