<div class="pattern"></div>
<canvas class="in"></canvas>
<div class="cursor"></div>

body {
	font-family: Arial;
	font-size: 16px;
	line-height: 1.5;
  cursor: none;
  height: 100%;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

div.cursor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #29044a;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width 0.25s, height 0.25s;
  cursor: none;
}

div.cursor span {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
}

div.cursor.is-down {
  width: 80px;
  height: 80px;
}

const cursor = document.querySelector('div.cursor')
const canvas = document.querySelector('canvas.in')

// when I hold the mouse down, make cursor bigger
const growCursor = function() {
  cursor.classList.add("is-down")
}
// when I let go of the mouse, make the cursor smaller
const shrinkCursor = function() {
  cursor.classList.remove("is-down")
}

const moveCursor = function(x, y) {
  cursor.style.left = x + "px"
  cursor.style.top = y + "px"
}

// set up canvas

const setupCanvas = (c) => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  const dpi = window.devicePixelRatio
  
  c.width = w * dpi
  c.height = h * dpi
  c.style.width = w + "px"
  c.style.height= h + "px"
  
  const context = c.getContext("2d")
  context.scale(dpi, dpi)
  context.fillStyle = "red"
}

// draw based on three things: canvas, x, y
const moveDraw = (c, x, y) => {
  const context = c.getContext("2d")
  context.rect(x-20,y-20,40,40)
  context.fill()
}

const startDraw = (c) => {
  const context = c.getContext("2d")
  context.fillStyle = "yellow"
}


setupCanvas(canvas)

document.addEventListener("mousedown", function() {
  growCursor();
  startDraw(canvas);
})

document.addEventListener("mouseup",function() {
  shrinkCursor();
})

document.addEventListener("mousemove", function(e){
  moveCursor(e.pageX,e.pageY)
  moveDraw(canvas,e.pageX,e.pageY)
  //e.pageX e.pageY
  //
})