Quadratic Curve Plot

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var p1 = {x:0, y:0};
var p2 = {x:200, y:10};
var p3 = {x:200, y:200};

function quadraticCurve(t) {
  
  var ti = 1 - t;
  var tiSq = ti * ti;
  var tSq = t * t;
  
  return {
    x: tiSq * p1.x + 2 * ti * t * p2.x + tSq * p3.x,
    y: tiSq * p1.y + 2 * ti * t * p2.y + tSq * p3.y
  };
}

ctx.fillStyle = '#111111';

for(var t = 0; t < 1; t+= 0.01) {
  p = quadraticCurve(t);
  ctx.fillRect(p.x,p.y,1,1);
}