SDL - Renderer & Rectangle (With C)

How to create a renderer and draw a rectangle.

Updated January 5, 2023

Table of contents

Quick Start (main.c)

#include <stdio.h>
#include <SDL.h>

int main(int argc, char *argv[]) {
	
    SDL_Init(SDL_INIT_VIDEO);
    
    SDL_Window *Window = 
        SDL_CreateWindow("Title",
                         SDL_WINDOWPOS_CENTERED,
                         SDL_WINDOWPOS_CENTERED,
                         640, 640, 0);
						 
    // Create a renderer
	
    SDL_Renderer *Renderer = SDL_CreateRenderer(Window, -1, 0);
    
    int Running = 1;
    SDL_Event Event = {0};
    
    while(Running) {
        while(SDL_PollEvent(&Event)) {
            switch(Event.type) {
                case SDL_QUIT: { Running = 0; }
                case SDL_KEYDOWN: { 
                    switch(Event.key.keysym.sym) {
                        case SDLK_o: { Running = 0; }
                        break;
                    }
                }
                break;
            }
        }
        
        // Render to a backbuffer
        
        SDL_SetRenderDrawColor(Renderer, 30, 30, 30, 255);
        SDL_RenderClear(Renderer);
        
        SDL_SetRenderDrawColor(Renderer, 50, 50, 50, 255);
        SDL_RenderFillRect(Renderer, &(SDL_Rect){64, 64, 64, 64});
        
        // Display rendered content
        
        SDL_RenderPresent(Renderer);
    }
    
    SDL_Quit();
    
	return 0;
}

Step-by-step

Add this line after you have created a window:

	SDL_Renderer *Renderer = SDL_CreateRenderer(Window, -1, 0);
  • Renderer hides the lower level rendering details from you. By default, it's hardware accelerated (e.g. OpenGL). It can also do software rendering.
  • The second parameter (-1) initializes the first rendering driver that supports the requested flags.
  • The third parameter (0) is for optional flags. SDL_RENDERER_ACCELERATED is the default value. You can force software rendering with SDL_RENDERER_SOFTWARE. Add SDL_RENDERER_PRESENTVSYNC to sync RenderPresent() with the display refresh rate.

Add these lines below the event loop:

	SDL_SetRenderDrawColor(Renderer, 30, 30, 30, 255);
	SDL_RenderClear(Renderer);
  • SDL_SetRenderDrawColor() sets the drawing color.
  • SDL_RenderClear() clears the screen with the current drawing color.

Use these lines to draw a colored rectangle:

    SDL_SetRenderDrawColor(Renderer, 50, 50, 50, 255);
    SDL_RenderFillRect(Renderer, &(SDL_Rect){64, 64, 64, 64});
  • SDL_RenderFillRect() fills a rectangle with the current drawing color.
  • SDL_Rect is a struct that represents a rectangle (x, y, width, height).

Display rendered content with this line:

	SDL_RenderPresent(Renderer);
  • SDL_RenderPresent() flips the image buffers. Backbuffer becomes the frontbuffer and frontbuffer becomes the backbuffer (in a two buffer system). Whatever is in the frontbuffer is displayed to the user.

Leave a comment

You can use Markdown to format your comment.