body {
  background: #eee;
  color: #333;
  font-family: sans-serif;
}

#canvas {
  width: 400px;
  height: 400px;
  background: #fff;
}

function renderCursor(size = 5, ele) {
  // repect devicePixelRatio
  size *= window.devicePixelRatio;

  // padding pixels around the cursor symbol
  const padding = 2;

  // create canvas for cursor symbol
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext("2d");

  canvas.width = (size * 2) + padding;
  canvas.height = (size * 2) + padding;

  // render cursor icon onto the canvas
  ctx.lineWidth = 1;
  ctx.strokeStyle = "rgba(51, 51, 51, 0.51)";

  ctx.arc(canvas.width / 2, canvas.height / 2, size, 0, Math.PI * 2);
  ctx.stroke();

  // use canvas.toBlob or canvas.toDataURL to create image uri
  // - canvas.toDataURL is faster to rerender
  // - canvas.toBlob is a smaller uri
  const url = canvas.toDataURL();
  
  // use new image as cursor image in css property
  ele.style.cursor = `url(${url}) ${size + padding} ${size + padding}, auto`;
  
  // canvas.toBlob(blob => {
  //   const url = window.URL.createObjectURL(blob);
  //   ele.style.cursor = `url(${url}) ${size + padding} ${size + padding}, auto`;
  // });
}

let cursorSize = 5;

window.addEventListener('DOMContentLoaded', () => {
  renderCursor(cursorSize, canvas);
});

window.addEventListener('wheel', e => {
  cursorSize = Math.max(Math.min(cursorSize - Math.sign(e.deltaY) * 2, 63), 3);
  renderCursor(cursorSize, canvas);
});