Why doesn't the RoundRect path with gradient fill produce the correct corners on right side?

Question

I came up with a routine to create a gradient filled rounded rectangle (button), however if I omit the code that writes the outline, the lower-right corner looks square and the upper-right seems to be not quite right either . Why is that?

note: The owner-draw button was created 23x23.

//-------------------------------------------------------------------------
// Purpose: Draw a rounded rectangle for owner-draw button
//
// Input:   dis        - [i] owner-draw information structure
//          undermouse - [i] flag if button is under mouse
//
// Output:  na
//
// Notes:   This creates a standard grey type rounded rectangle for owner
//          drawn buttons.
//
//          This routine does not currently use undermouse to change 
//          gradient
//
void DrawRoundedButtonRectangle(const DRAWITEMSTRUCT& dis, BOOL undermouse)
{
  UNREFERENCED_PARAMETER(undermouse);

  // save DC before we modify it.
  SaveDC(dis.hDC);

  // create a path for the round rectangle (right/bottom is RECT format of +1)
  BeginPath(dis.hDC);
  RoundRect(dis.hDC, dis.rcItem.left, dis.rcItem.top, dis.rcItem.right, dis.rcItem.bottom, 6, 6);
  EndPath(dis.hDC);

  // save DC before changing clipping region
  SaveDC(dis.hDC);
  // set clipping region to be the path
  SelectClipPath(dis.hDC, RGN_COPY);

  TRIVERTEX vertices[2];

  // setup the starting location and color (light grey)
  vertices[0].x = dis.rcItem.left;
  vertices[0].y = dis.rcItem.top;
  vertices[0].Red = MAKEWORDHL(211, 0);
  vertices[0].Green = MAKEWORDHL(211, 0);
  vertices[0].Blue = MAKEWORDHL(211, 0);
  vertices[0].Alpha = 0xffff;

  // setup the ending location and color (grey)
  vertices[1].x = dis.rcItem.right;   // should this be -1 ?
  vertices[1].y = dis.rcItem.bottom;  // should this be -1 ?
  vertices[1].Red = MAKEWORDHL(150, 0);
  vertices[1].Green = MAKEWORDHL(150, 0);
  vertices[1].Blue = MAKEWORDHL(150, 0);
  vertices[1].Alpha = 0xffff;

  // setup index to use for left to right
  GRADIENT_RECT r[1];
  r[0].UpperLeft = 0;
  r[0].LowerRight = 1;

  // fill the DC with a vertical gradient 
  GradientFill(dis.hDC, vertices, _countof(vertices), r, _countof(r), GRADIENT_FILL_RECT_V);

  // go back to original clipping area
  RestoreDC(dis.hDC, -1);
  // change the path to be the outline border
  if (WidenPath(dis.hDC)) {
    // set clipping region to be the path
    SelectClipPath(dis.hDC, RGN_COPY);
    // create a gradient on the outline
    GradientFill(dis.hDC, vertices, _countof(vertices), r, _countof(r), GRADIENT_FILL_RECT_V);
  }
  // put back the DC as we received it
  RestoreDC(dis.hDC, -1);
}

The red in the pics show the background.

The bad button is generated when the WidenPath section is removed.

Answer 1

According to your description, I think you may be talking about this situation.

    BeginPath(dis.hDC);
//  RoundRect(dis.hDC, dis.rcItem.left, dis.rcItem.top, dis.rcItem.right, dis.rcItem.bottom, 6, 6);
    EndPath(dis.hDC);

Let me first analyze the reason why I got this shape.

When you redraw the button, if the length and width of the redrawn button are smaller than that of the button itself, only a part of the redrawn will occur.

case WM_CREATE:
{
    //Button width:230  Button height:230 
    button = CreateRoundRectButton(hWnd, 500, 200, 230, 230, 30, 30, BTN_ID);
    return 0;
}
break;
case WM_DRAWITEM:
{

    DRAWITEMSTRUCT dis;
    dis.CtlType = ODT_BUTTON;
    dis.CtlID = BTN_ID;
    dis.hDC = GetDC(button);
    dis.rcItem.left = 0;
    dis.rcItem.top = 0;
    dis.rcItem.right = 200;  //Width of redrawing
    dis.rcItem.bottom = 200; //Height of redrawing
    DrawRoundedButtonRectangle(dis, TRUE);
}

In order to see the effect more clearly, I will widen the width and height.

If I omit the code that writes the outline, It only executes the following code to implement the gradient.

// fill the DC with a vertical gradient 
    GradientFill(dis.hDC, vertices, _countof(vertices), r, _countof(r), GRADIENT_FILL_RECT_V);

If I change the XY coordinates of the redrawing.

Actually, when you disable RoundRect, the only thing that works is GradientFill.

Updated:

The redrawn area is based on rcItem. When you draw a path, it's only the inside area that is considered and the outline is not, so WidenPath then goes on the outline and that gives the true routed rect area.