Alpha Channel

by Richard

HTML

<canvas width="512" height="512"></canvas>

JavaScript

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

function circle(x, y, r) {
  ctx.beginPath()
  ctx.arc(x, y, r, 0, 2 * Math.PI, false);
  ctx.fill();
}

function render(x, y) {
  ctx.fillStyle = 'white'
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = 'rgba(255, 0, 0, 0.6)'
  circle(200, 200, 50)
  ctx.fillStyle = `rgba(0, 255, 0, 0.6)`
  circle(260, 200, 50)
  ctx.fillStyle = `rgba(0, 0, 255, 0.6)`
  circle(230, 250, 50)


  ctx.fillStyle = `rgba(${255 * Math.sin(x*3)}, ${255*Math.cos(y*3)}, ${255*Math.tan(x*3)}, 1)`
  circle(400, 300, 50)
}


window.addEventListener('mousemove', e => {

  const x = e.clientX / window.document.documentElement.clientWidth
  const y = e.clientY / window.document.documentElement.clientHeight


  render(x, y)
})