ClipRect: Draw outside of the box

Do you know how to draw something like this in Android?

Yes, canvas.drawRoundRect()!

radius = height / 2;
rect.set(0, 0, width, height);
canvas.drawRoundRect(rect, radius, radius, paint);

How about something like this?

It kind of looks like the rectangle with rounded corners. If only there is a way to chop off the end! Well, there is: clipRect.

When you clip a canvas, you are telling Android to draw only inside that rectangle. This allows us to color outside of the box, so to speak, but only keep the part that is inside the box. In our case, we will draw a round rect with size width + height by height, but clip it to width by height so the rounded part on the right is "outside".

canvas.save();
canvas.clipRect(0, 0, width, height);

rect.set(0, 0, width + height, height);
canvas.drawRoundRect(rect, radius, radius, paint);

canvas.restore();

Remember to save and restore so the rest of your app can draw wherever it wants.

Challenge

The source code is in ClipRectActivity in android-graphics-demo.

Can you modify it to clip the rectangle on the other side?

Bonus: Try these other techniques!

@chiuki or simply drawPath ;)

— Cyril Mottier (@cyrilmottier) March 19, 2016

@chiuki @cyrilmottier Nah, you can addArc() or use op() of a rectangle and circle

— Romain Guy (@romainguy) March 19, 2016