animated quadratic

index.html

<canvas/>

main.dart

import 'dart:html';

main() async {
  CanvasElement canvas = querySelector("canvas");
  canvas.width = 500;
  canvas.height = 500;
  
  var ctx = canvas.context2D;
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, 500, 500);
  
  ctx.strokeStyle = 'black';
  ctx.lineWidth = 10;
  ctx.lineCap = 'square';
  
  var start = [0, 250];
  var end = [500, 250];
  var midy = 0;
  var dir = 1;
  while (true) {
      ctx.fillRect(0, 0, 500, 500);
      var path = Path2D();
      path.moveTo(start[0], start[1]);
    	path.quadraticCurveTo(250, midy, end[0], end[1]);
    	ctx.stroke(path);
      await window.animationFrame;
    
    	midy += dir;
    	if (midy > 500) {
        midy = 500;
        dir = -1;
      }
    	else if (midy < 0) {
        midy = 0;
        dir = 1;
      }
  }
}