The key is you want to visualize how the code is drawing the object. The original code starts at the top left corner and draws in a clockwise direction.
First, you need to move your start point, this will be much easier if you start on a corner, not a rounded edge.
Next, you need to modify your draws so that your rounding the edges in the right place.
moveTo(0, height);
lineTo(0, radius);
curveTo(0, 0, 0, 0, radius, 0);
lineTo(width - radius, 0);
curveTo(width, 0, width, 0, width, radius);
lineTo(width, height);
closePath();
So, what I've done here is:
- Start in the bottom left corner
- Move vertically to the start of the curve located in the top left corner
- Draw the curve in the top left corner
- Move horizontally to the start of the curve located in the top right corner
- Draw the curve in the top right corner
- Move vertically to the bottom right corner
- Close the shape (move horizontally to the bottom left corner)