branflake2267/canvas-test.html

## canvas-test.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Canvas Scrolling</title>
  <style>

  </style>
</head>

<body>
  <style>
    canvas {
      border: 1px solid gray;
      padding: 2px;
      /* cursor: pointer; */
    }
  </style>

  <canvas id="canvas" width="20px" height="512px"></canvas>
  <span>position: </span>
  <span id="position">0 </span>
  <span>&nbsp;</span>
  <span>value: </span>
  <span id="value">0 </span>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    var width = 20;
    var height = 500;
    var scrollbarSize = 20;
    var max = 100;
    var drag = false;
    var value = 0;
    var positionY = 0;

    function drawScrollbarInFrame() {
      console.log("drawScrollbarInFrame: positionY=" + positionY);
      window.requestAnimationFrame(drawScrollbar);
    }

    function drawScrollbarByValue(value) {
      positionY = ((height - scrollbarSize) / max) * value;
      drawScrollbarInFrame();
    }

    function drawScrollbar() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.fillStyle = '#aaa';
      ctx.fillRect(0, positionY, width, scrollbarSize);

      drawPosition();
    }

    function drawPosition() {
      value = Math.ceil(max / height * positionY);

      var positionEl = document.getElementById('position');
      positionEl.innerHTML = positionY;

      var valueEl = document.getElementById('value');
      valueEl.innerHTML = value;
    }

    function onMouseDown(event) {
      //console.log("mouseDown");
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drag = true;
    }

    function onMouseUp(event) {
      console.log("mouseUp");
      drag = false;
    }

    function onMouseMove(event) {
      if (!drag) {
        return;
      }
      positionY = event.pageY;
      drawScrollbarInFrame();
    }

    function onMouseWheel(event) {
      //console.log("mouseWheel=", event);

      // Invert can be done here?
      var delta = 1;
      if (event.deltaY < 0) {
        delta = 1;
      } else {
        delta *= -1;
      }

      positionY = positionY - delta;
      drawScrollbarInFrame();

      return false;
    }

    canvas.addEventListener('mousedown', onMouseDown, false);
    canvas.addEventListener('mouseup', onMouseUp, false);
    canvas.addEventListener('mousemove', onMouseMove, false);
    canvas.addEventListener('wheel', onMouseWheel, false);

    // initial draw with value of 0
    drawScrollbarByValue(0);
  </script>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8" />
	<title>Canvas Scrolling</title>
	<style>

	</style>
	</head>

	<body>
	<style>
	canvas {
	border: 1px solid gray;
	padding: 2px;
	/* cursor: pointer; */
	}
	</style>

	<canvas id="canvas" width="20px" height="512px"></canvas>
	<span>position: </span>
	<span id="position">0 </span>
	<span> </span>
	<span>value: </span>
	<span id="value">0 </span>

	<script>
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	var width = 20;
	var height = 500;
	var scrollbarSize = 20;
	var max = 100;
	var drag = false;
	var value = 0;
	var positionY = 0;

	function drawScrollbarInFrame() {
	console.log("drawScrollbarInFrame: positionY=" + positionY);
	window.requestAnimationFrame(drawScrollbar);
	}

	function drawScrollbarByValue(value) {
	positionY = ((height - scrollbarSize) / max) * value;
	drawScrollbarInFrame();
	}

	function drawScrollbar() {
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.fillStyle = '#aaa';
	ctx.fillRect(0, positionY, width, scrollbarSize);

	drawPosition();
	}

	function drawPosition() {
	value = Math.ceil(max / height * positionY);

	var positionEl = document.getElementById('position');
	positionEl.innerHTML = positionY;

	var valueEl = document.getElementById('value');
	valueEl.innerHTML = value;
	}

	function onMouseDown(event) {
	//console.log("mouseDown");
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	drag = true;
	}

	function onMouseUp(event) {
	console.log("mouseUp");
	drag = false;
	}

	function onMouseMove(event) {
	if (!drag) {
	return;
	}
	positionY = event.pageY;
	drawScrollbarInFrame();
	}

	function onMouseWheel(event) {
	//console.log("mouseWheel=", event);

	// Invert can be done here?
	var delta = 1;
	if (event.deltaY < 0) {
	delta = 1;
	} else {
	delta *= -1;
	}

	positionY = positionY - delta;
	drawScrollbarInFrame();

	return false;
	}

	canvas.addEventListener('mousedown', onMouseDown, false);
	canvas.addEventListener('mouseup', onMouseUp, false);
	canvas.addEventListener('mousemove', onMouseMove, false);
	canvas.addEventListener('wheel', onMouseWheel, false);

	// initial draw with value of 0
	drawScrollbarByValue(0);
	</script>

	</body>

	</html>