var width, height

var step = 0;

var canvas = document.createElement('canvas')

var canvas2 = document.createElement('canvas')

var canvas3 = document.createElement('canvas')

var ctx = canvas.getContext('2d')

var ctx2 = canvas2.getContext('2d')

var ctx3 = canvas3.getContext('2d')

var bg = [13, 27, 34]

// document.getElementsByTagName('body')[0].appendChild(canvas)

// document.getElementsByTagName('body')[0].appendChild(canvas2)

document.getElementsByTagName('body')[0].appendChild(canvas3)

// mouse coordinates

// var mousex = window.innerWidth / 2, mousey = window.innerHeight;

// document.onmousedown = function(e){

//   // pt = pt === pt1 ? pt2 : pt1

//   pt1.x = e.pageX;

//   pt1.y = e.pageY;

// }

document.onmousemove = function(e){

  pt2.x = e.pageX;

  pt2.y = e.pageY;

}

var pt1 = {x:window.innerWidth*0.5, y:window.innerHeight*0.1}

var pt2 = {x:window.innerWidth*0.5, y:window.innerHeight*0.8}

window.addEventListener('resize', setup)

setup()

function setup() {

  canvas3.width = canvas2.width = canvas.width = width = window.innerWidth

  canvas3.height = canvas2.height = canvas.height = height = window.innerHeight

  ctx.beginPath();

  ctx.rect(0, 0, width, height)

  // ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`

  ctx.fillStyle = `rgba(0, 0, 0, ${1})`

  ctx.fill()

  ctx2.beginPath();

  ctx2.rect(0, 0, width, height)

canvas, body{

  padding: 0;

  margin: 0;

  overflow: hidden;

}