javascript,math,html5-canvas,quadratic-curve

The control point for a quadratic curve is the intersection point of the tangents. context.beginPath(); context.strokeStyle = 'orange'; for(i=-2;i<=2;i++) { // Current point x1 = i; y1 = x1 * x1; y1p = 2 * x1; // derivitive // Previous point x0 = i - 1; y0 = x0 *...

The key problem is that the code disposes the Graphics object. On the second iteration the Graphics object has been disposed and the call to DrawCurve will fail. And as mentioned in the comments, the DrawCurve method expects 3 points in the array. See under Remarks on the MSDN Page...

javascript,math,html5-canvas,bezier,quadratic-curve

To match a quadratic Bezier to this parabola formula and assuming origin is 0, you can use place the control point at -y0 or -y1 from one of the end points. Example First, lets rearrange the formula: y2 = 4ax to: x = y2 / 4a so we can plot...

javascript,canvas,quadratic-curve

I didn't check your code, but here is a generic function to draw a rounded rectangle: var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var x=50; var y=50; var w=50; var h=35; var direction=1; ctx.strokeStyle='gray'; ctx.fillStyle='orchid'; ctx.lineWidth=5; animate(); function animate(){ requestAnimationFrame(animate); ctx.clearRect(0,0,cw,ch); roundRect(x,y,w,h,10); ctx.stroke(); ctx.fill(); w+=direction; h+=direction; if(w<50 || w>100){...