How do I draw a transparent or semi-transparent rectangle on top of an opaque one in SDL2?

Question

Here's my code to draw SDL_Rect objects rect and rect2:

#include <iostream>
#include <SDL2/SDL.h>

int main(){
    SDL_Window *window=     SDL_CreateWindow("Test", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, 640, 480, SDL_WINDOW_SHOWN);
    if(window == 0)
        std::cout << SDL_GetError() << std::endl;

    SDL_Renderer *renderer= SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED | SDL_RENDERER_PRESENTVSYNC);
    if(renderer == NULL)
        std::cout << SDL_GetError() << std::endl;

    SDL_Rect rect;
    rect.x=     100;
    rect.y=     100;
    rect.w=     100;
    rect.h=     100;

    SDL_Rect rect2;
    rect2.x=    150;
    rect2.y=    150;
    rect2.w=    100;
    rect2.h=    100;

    while(true){
        Uint8 r,g,b,a;

        r=  32;
        g=  32;
        b=  32;
        a=  255;
        if(SDL_SetRenderDrawColor(renderer, r, g, b, a) == -1)
            std::cout << SDL_GetError() << std::endl;
        if(SDL_RenderClear(renderer) == -1)
            std::cout << SDL_GetError() << std::endl;

        r=  255;
        g=  255;
        b=  255;
        a=  255;
        if(SDL_SetRenderDrawColor(renderer, r, g, b, a) == -1)
            std::cout << SDL_GetError() << std::endl;
        if(SDL_RenderFillRect(renderer, &rect) == -1)
            std::cout << SDL_GetError() << std::endl;

        r=  100;
        g=  100;
        b=  100;
        a=  0;
        if(SDL_SetRenderDrawColor(renderer, r, g, b, a) == -1)
            std::cout << SDL_GetError() << std::endl;
        if(SDL_RenderFillRect(renderer, &rect2) == -1)
            std::cout << SDL_GetError() << std::endl;

        SDL_RenderPresent(renderer);
    }

    return 0;
}

While I can draw rect to SDL_Renderer object renderer just fine, if I add rect2 it is always opaque, blocking view of rect. Even though I set rect2's alpha to 0, it still shows up opaque, blocking rect from view.

How do I fix this so rect2 is more transparent?

Answer 1

All you need to do is call
SDL_SetRenderDrawBlendMode(renderer, SDL_BLENDMODE_BLEND);
after creating your renderer to enable alpha blending with RenderDraw functions. (SDL documentation)