<div class="wrapper">
  <canvas id="canvas"></canvas>
  
  <h1 class="title">Particle</h1>
</div>

/* #7EC2C2 #9DDCDC #FFF4E1 #E67A7A */

body {
  background-color: #7EC2C2;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 100px;
  font-weight: bold;
  color: #fff4e14d;
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
  constructor(x, y, radius, directionX, directionY) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.directionX = directionX;
    this.directionY = directionY;
  }
  render() {
    // 円をかく
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fillStyle = "#E67A7A";
    ctx.fill();
  }
  update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    this.x ++;
    if(this.x > canvas.width) {
      this.x = 0;
    }
    
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.fillStyle = "#E67A7A";
    ctx.fill();
  }
}

const particle = new Particle(100, 100, 10, 0, 0);
particle.render();

render();

window.requestAnimationFrame = 
  window.requestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.weblitRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function (cb) { setTimeout(cb, 17); };

function render() {
  particle.update();
  requestAnimationFrame(render);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.