Lua Academy · Lesson

Drawing Shapes and Images

Put graphics on screen.

Drawing Shapes and Images is a free Lua Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Lua Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The love.graphics Module

All rendering in LÖVE happens through love.graphics. You call its functions inside love.draw, and the engine presents the frame when the callback returns.

It can draw primitive shapes, images, text, and lines, plus manage colors and transforms. Everything is redrawn from scratch every frame.

Drawing Rectangles

love.graphics.rectangle takes a mode then position and size. The mode is either 'fill' for a solid shape or 'line' for just the outline.

Coordinates start at the top-left corner of the window, with x increasing to the right and y increasing downward.

function love.draw()
  love.graphics.rectangle('fill', 50, 50, 120, 80)
  love.graphics.rectangle('line', 200, 50, 120, 80)
end

Circles and Ellipses

love.graphics.circle(mode, x, y, radius) draws a circle centered at x, y. Like rectangles it accepts 'fill' or 'line'.

For ovals use love.graphics.ellipse with separate horizontal and vertical radii. You can pass an extra segments argument to control smoothness.

function love.draw()
  love.graphics.circle('fill', 150, 150, 40)
  love.graphics.ellipse('line', 300, 150, 60, 30)
end

Setting Colors

love.graphics.setColor sets the tint for everything drawn afterward. In modern LÖVE, components range from 0 to 1, so white is 1, 1, 1.

Color is stateful: once set, it applies to all later draws until you change it again. Reset to white before drawing images you want untinted.

function love.draw()
  love.graphics.setColor(1, 0, 0)   -- red
  love.graphics.rectangle('fill', 20, 20, 60, 60)
  love.graphics.setColor(1, 1, 1)   -- back to white
end

Lines and Points

love.graphics.line connects a series of x, y points. love.graphics.setLineWidth controls thickness for lines and outlined shapes.

You can pass many points at once to draw a connected path, which is handy for trails, paths, or simple vector art.

function love.draw()
  love.graphics.setLineWidth(3)
  love.graphics.line(10, 10, 80, 60, 150, 20)
end

Loading an Image

Load images once in love.load with love.graphics.newImage. This returns an Image object you store in a variable for reuse.

Never load images inside love.draw, as that would re-read the file every frame and destroy performance.

function love.load()
  sprite = love.graphics.newImage('player.png')
end

Drawing an Image

love.graphics.draw(image, x, y) renders an image at the given position. By default the top-left corner of the image lands at x, y.

Extra arguments add rotation, scale, and origin offset, giving you full control over how each sprite appears.

function love.draw()
  love.graphics.draw(sprite, player.x, player.y)
end

Rotation and Scaling

The full signature is draw(image, x, y, r, sx, sy, ox, oy). Here r is rotation in radians, sx and sy are scale factors.

The origin offset ox, oy sets the pivot. To rotate around an image center, set the origin to half the image width and height.

local w, h = sprite:getWidth(), sprite:getHeight()
love.graphics.draw(sprite, x, y, angle, 1, 1, w/2, h/2)

Drawing Text

love.graphics.print(text, x, y) draws a string using the current font. love.graphics.setFont changes which font is active.

Create custom fonts with love.graphics.newFont('font.ttf', 24) in love.load. Remember color also tints text, just like shapes.

function love.draw()
  love.graphics.setColor(1, 1, 1)
  love.graphics.print('Score: ' .. score, 10, 10)
end

Clearing and Background

LÖVE clears the screen automatically each frame, but you can set the clear color with love.graphics.setBackgroundColor in love.load.

For manual control inside custom rendering, love.graphics.clear fills the buffer with a color. Most games just set the background once and let the engine handle clearing.

function love.load()
  love.graphics.setBackgroundColor(0.1, 0.1, 0.2)
end

Quads for Sprite Sheets

A Quad selects a rectangular region of an image, letting one sprite sheet hold many frames. Create it with love.graphics.newQuad.

Pass the quad to love.graphics.draw(image, quad, x, y) to render just that region. This is the foundation of sprite animation.

local sheet = love.graphics.newImage('sheet.png')
local frame = love.graphics.newQuad(0, 0, 32, 32, sheet:getDimensions())
-- love.graphics.draw(sheet, frame, x, y)

Quick Check

Test your knowledge of LÖVE drawing.

Recap

You draw with love.graphics inside love.draw: rectangles, circles, lines, images, and text. setColor tints subsequent draws and is stateful.

Load images once in love.load with newImage, then render them with draw, adding rotation, scale, and quads for sprite sheets.

Frequently asked questions

Is the “Drawing Shapes and Images” lesson free?

Yes — the full text of “Drawing Shapes and Images” is free to read here on the web, and the Lua Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Lua Academy course, upgrade to CoddyKit PRO.

What will I learn in “Drawing Shapes and Images”?

Put graphics on screen. You practise Lua Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Lua Academy?

No prior experience is required. Lua Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Drawing Shapes and Images” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Lua Academy lesson?

Yes. Every Lua Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Lua Academy