HTML and Javascript canvas cheatsheet

Create animation loop

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // ctx.fillStyle = "rgba(0,0,0,.1)";
  // ctx.fillRect(0, 0, canvas.width, canvas.height);
  handleParticles();
  hue++;
  requestAnimationFrame(animate);
}

animate();

Create linear gradient

const gradient = ctx.createLinearGradient(
  0,
  0,
  canvas.width,
  canvas.height
);
gradient.addColorStop("0.1", "#ff5c33");
gradient.addColorStop("0.2", "#ff66b3");
gradient.addColorStop("0.3", "#ccccff");
gradient.addColorStop("0.4", "#b3ffff");
gradient.addColorStop("1", "#80ff80");
gradient.addColorStop("0.9", "#ff6f3c");

Create radial gradient

const gradient = ctx.createRadialGradient(
  canvas.width / 2,
  canvas.height / 2,
  0,
  canvas.width / 2,
  canvas.height / 2,
  250
);

Draw circle

draw() {
  ctx.fillStyle = "blue";
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
  ctx.fill();
}

Draw line

this.#ctx.beginPath();
this.#ctx.moveTo(x, y);
this.#ctx.lineTo(
  x + Math.cos(angle) * length,
  y + Math.sin(angle) * length
);
this.#ctx.stroke();

Control frame rate

let lastTime = 0;
let timer = 0;
const fps = 10;
const nextFrame = 1000 / fps;

function animate(timeStamp) {
  const deltaTime = timeStamp - lastTime;
  lastTime = timeStamp;

  if (timer > nextFrame) {
    ctx.font = effect.fontSize + "px monospace";
    ctx.fillStyle = "rgba(0,0,0, 0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < effect.symbols.length; i++) {
      effect.symbols[i].draw(ctx);
    }
    timer = 0;
  } else {
    timer += deltaTime;
  }

  requestAnimationFrame(animate);
}

animate(0);

Use base 64 to display image

Partial code is shown below. You can use png to base64 converter online to convert png image to base 64 format and then copy the base 64 code into the src attribute. The code shall start with data:image/png.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA" alt="" />

Example 1: basic particle moving on Canvas

const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particleArray = [];

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

const mouse = { x: undefined, y: undefined };

canvas.addEventListener("click", function (event) {
  mouse.x = event.x;
  mouse.y = event.y;
});

canvas.addEventListener("mousemove", function (event) {
  mouse.x = event.x;
  mouse.y = event.y;
});

class Particle {
  constructor() {
    //this.x = mouse.x;
    //this.y = mouse.y;
    this.radius = 10;
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.size = Math.random() * 5 + 1;
    this.speed = 5;
    this.speedX = this.speed * (Math.random() - 0.5);
    this.speedY = this.speed * (Math.random() - 0.5);
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.x - this.radius <= 0 || this.x + this.radius >= canvas.width) {
      this.speedX = -this.speedX;
    }
    if (this.y - this.radius <= 0 || this.y + this.radius >= canvas.height) {
      this.speedY = -this.speedY;
    }
  }
  draw() {
    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }
}

function init() {
  for (let i = 0; i < 100; i++) {
    particleArray.push(new Particle());
  }
}

init();

function handleParticles() {
  for (let i = 0; i < particleArray.length; i++) {
    particleArray[i].update();
    particleArray[i].draw();
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  handleParticles();

  requestAnimationFrame(animate);
}

animate();

Example 2: animation

canvas = document.getElementById("canvas1");
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particleArray = [];
let hue = 0;

mouse = { x: undefined, y: undefined };

canvas.addEventListener("mousemove", function (event) {
  mouse.x = event.x;
  mouse.y = event.y;
  for (let i = 0; i < 2; i++) {
    particleArray.push(new Particle());
  }
});

canvas.addEventListener("click", function (event) {
  mouse.x = event.x;
  mouse.y = event.y;
  for (let i = 0; i < 10; i++) {
    particleArray.push(new Particle());
  }
});

class Particle {
  constructor() {
    this.x = mouse.x;
    this.y = mouse.y;
    // this.x = Math.random() * canvas.width;
    // this.y = Math.random() * canvas.height;
    this.radius = Math.random() * 15 + 1;
    this.speed = 5;
    this.speedX = (Math.random() - 0.5) * this.speed;
    this.speedY = (Math.random() - 0.5) * this.speed;
    this.color = "hsl(" + hue + ",100%,50%)";
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.x < 0 || this.x > canvas.width) {
      this.speedX *= -1;
    }

    if (this.y < 0 || this.y > canvas.height) {
      this.speedY *= -1;
    }

    if (this.radius > 0.2) this.radius -= 0.1;
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fill();
  }
}

function handleParticles() {
  for (i = 0; i < particleArray.length; i++) {
    particleArray[i].update();
    particleArray[i].draw();

    for (j = i; j < particleArray.length; j++) {
      let x1 = particleArray[i].x;
      let y1 = particleArray[i].y;
      let x2 = particleArray[j].x;
      let y2 = particleArray[j].y;
      let distance = Math.sqrt((x1 - x2) ** 2 + (y1 - y2) ** 2);
      if (distance < 100) {
        ctx.beginPath();
        ctx.strokeStyle = particleArray[i].color;
        ctx.lineWidth = 0.2;
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.closePath();
        ctx.stroke();
      }
    }

    if (particleArray[i].radius <= 0.3) {
      particleArray.splice(i, 1);
      i--;
    }
  }
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // ctx.fillStyle = "rgba(0,0,0,.1)";
  // ctx.fillRect(0, 0, canvas.width, canvas.height);
  handleParticles();
  hue++;
  requestAnimationFrame(animate);
}

animate();

References and materials

[1] Stackoverflow post