How do you cut a quadratic curve in half?

Question

I'm trying to draw half of an existing quadratic curve, though I'm not sure how to adjust the control-point to do so:

http://jsfiddle.net/s6sB8/3/

You'll see the top half of a rounded rectangle drawn in canvas, and a box with a top CSS borders. What I'm trying to do is reproduce the css drawn box with canvas, in other words cut the corner in half.

I've been messing with the starting point & first control point but can't figure out how to accurately splice the curve.

I know that the canvas won't perfectly match the CSS which is fine, I'm not trying to get it to. I am trying to get exactly half of the curve drawn without screwing with its shape at all. And I'm interested in the math behind this more than the solution to this specific example

updated example: http://jsfiddle.net/s6sB8/4/

You can see that although close, the curve I'm trying to draw doesn't quite match the original...

Answer 1

As part of my project http://canvimation.github.com/ I needed to be able to draw a rounded rectangles.

I used Bezier Curves to approximate quarter circles rather than quadratic curves to draw the corners. I have created a fiddle based on my code http://jsfiddle.net/kCd7b/ to draw rounded rectangles. in the function rounded_rectangle left, top, width and height are the parameters for the bounding rectangle and radius is the radius of the corner arc. The function could, I presume, be changed to use arcs or quadratic curves

NOTE: 1 My reference for this method came from the second link in the answer to this question. How to best approximate a geometrical arc with a Bezier curve?

NOTE 2: My method starts by drawing the horizontal top line and draws full curves. If you want to start in the middle of a curve and draw half the curve then you will need to read http://www.iancgbell.clara.net/maths/bezier.htm

NOTE 3: I used Bezier curves rather than arcs as it made the drawing and transformation functions easier to write as then they only needed to take into account lineTo and bezierCurveTo whatever shape I was drawing.

NOTE 3: The source code for my project is at https://github.com/canvimation/canvimation.github.com

Answer 2

I am not very good at this, so, just a advice.

A good example from Mozilla: https://developer.mozilla.org/samples/canvas-tutorial/2_5_canvas_quadraticcurveto.html

Quadratic Function from wiki: http://en.wikipedia.org/wiki/Quadratic_curve

After reading link above, we know that current position is start point , control point is the point never reach but closer and closer to, and we need a end point. When we have them we got a curve.

In your question, we "adjust the control point" like this:

      ctx.moveTo          ( 15, 11 );
      ctx.quadraticCurveTo( 16, 10, 20, 10 );
      ctx.lineTo          ( 95, 10 );

      ctx.moveTo          ( 100, 11);
      ctx.quadraticCurveTo( 99, 10, 95, 10 );

      ctx.lineWidth = 10;
      ctx.stroke();

Looks well.