HTML Canvas Boilerplate

canvas.css

body {
  margin: 0;
  overflow: hidden;
}

canvas.html

<canvas></canvas>

canvas.js

// Initial Setup
var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');

canvas.width = innerWidth;
canvas.height = innerHeight;

// Variables
var mouse = {
  y: innerWidth / 2,
  x: innerHeight / 2
}

var color = [
  '#2185C5',
  '#7ECEFD',
  '#FFF6E5',
  '#FF7F66'
]

// Event Listeners
addEventListener("mousemove", function(){
  mouse.x = event.clientX,
  mouse.y = event.clientY
});

addEventListener("resize", function() {
  canvas.width = innerWidth,
  canvas.height = innerHeight
  
  init();
});

// Utility Functions
function randomIntFromRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

function randomColor(colors) {
  return color[Math.floor(Math.random() * colors.length)];
}

function Object(x, y, radius, color) {
  this.x = x;
  this.y = y;
  this.radius = radius;
  this.color = color;
  
  this.update = function() {
    
    this.draw();
  }
  
  this.draw = function() {
    c.beginPath();
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    c.fillStyle = this.color;
    c.fill();
    c.closePath();
  }
}

// Implementation
function init() {
  
}

// Animation Loop
function animate() {
  requestAnimationFrame(animate);
  
  c.clearRect(0, 0, canvas.width, canvas.height);
  c.fillText("HTML CAVNAS BOILERPLATE", mouse.x, mouse.y);
}

init();
animate();