HTML canvas scroll able list

main.dart

import 'dart:html';

const num kWidth = 480;
const num kHeight = 320;
const num kTileHeight = kHeight ~/ 10;
const num kListHeight = kHeight;

T getSelf<T>(T object) => object;

CanvasElement canvas, tileCanvas;
CanvasRenderingContext2D context, tileContext;

void main() {
  canvas = CanvasElement(width: kWidth, height: kHeight);
  context = canvas.context2D;

  tileCanvas = CanvasElement(width: kWidth, height: kTileHeight);
  tileContext = tileCanvas.context2D;
  tileContext.font = "10px monospace";

  List<int> list = List<int>.generate(16, getSelf);

  document.body.append(canvas);

  num offset = 0;
  num maxListHeight = list.length * kTileHeight;

  drawList(list, offset, 0);

  canvas.onWheel.listen((e) {
    num delta = e.deltaY;
    num tempOffset = offset + delta / 8;

    if (!delta.isNegative && tempOffset + kListHeight >= maxListHeight) {
      return;
    } else if (tempOffset < 0) {
      return;
    }

    int offsetIndex = offset ~/ kTileHeight;
    offset = tempOffset;
    drawList(list, offset, offsetIndex);
  });
}

void drawList(List<int> list, num offset, int offsetIndex) {
  context.clearRect(0, 0, kWidth, kHeight);

  for (int i = 0, l = list.length, oi; i < 11; i++) {
    oi = offsetIndex + i;

    if (oi < l) {
      drawTile(list[oi], oi * kTileHeight - offset);
    }
  }
}

void drawTile(int value, num offset) {
  tileContext.clearRect(0, 0, kWidth, kTileHeight);
  tileContext.fillText(value.toRadixString(16).toUpperCase(), 10, 16);
  context.drawImage(tileCanvas, 0, offset);
}