CODEWITHSUNDEEP
javascriptcanvasgeometry
CleverPatrick
CleverPatrick

Reputation: 9483

How do you draw the bottom half of a rounded rectangle on a canvas in JavaScript

I am drawing large rounded rectangles on a canvas using quadratic curves like this:

    var ctx = canvas.getContext('2d');
    ...
    ctx.moveTo(x, my);
    ctx.quadraticCurveTo(x, y, mx, y);
    ctx.quadraticCurveTo(x + w, y, x + w, my);
    ctx.quadraticCurveTo(x + w, y + h, mx, y + h);
    ctx.quadraticCurveTo(x, y + h, x, my);

I can draw a full rounded rectangle: http://jsfiddle.net/s9x3xn4z/

I can draw the top half of a rounded rectangle: http://jsfiddle.net/1oeduLqx/

But I cannot figure out how to draw the bottom half of a rounded rectangle.

My attempts all wind up looking like this: http://jsfiddle.net/tfyagcew/

Which is decidedly not what I am looking for!

How can I draw the bottom half of the rounded rectangle?

Upvotes: 0

Views: 329

Answers (2)

GravityScore
GravityScore

Reputation: 307

Pretty simple answer:

ctx.moveTo(x, my);
ctx.quadraticCurveTo(x, y + h, mx, y + h);
ctx.quadraticCurveTo(x + w, y + h, x + w, my);

Upvotes: 1

Pointy
Pointy

Reputation: 413702

It's just the upside-down version of the top half:

ctx.moveTo(x, y);
ctx.quadraticCurveTo(x, my, mx, my);
ctx.quadraticCurveTo(x + w, my, x + w, y);

The first coordinate pair is the control point, and the second is the destination. The midway point has to be (mx, my) and the final point is (x + w, y).

Upvotes: 1

Related Questions