Your First canvas_item Shader

Goal: by the end of this doc you've written a shader with your own hands, attached it to a sprite in your own project, and controlled it from the Inspector. Everything here is official Godot documentation — current, 4.x-accurate, no translation needed.

The path, in order#

1. Introduction to shaders (official docs, 10 min read) — what a shader is, what the GPU does with it, and Godot's shader types. You only care about canvas_item (2D) for now.
2. Your first 2D shader (official docs, ~1 hour hands-on) — the actual tutorial: fragment function, UV, COLOR, TEXTURE, uniforms you tweak from the Inspector, a vertex function, TIME. Do it on a sprite from your own game, not the docs' example — same code, more meaning.
3. CanvasItem shader reference (official reference) — every built-in variable and render mode. Not a read-through; this is your permanently-open tab.

Prove it stuck — three micro-exercises, no guides#

1. A uniform-controlled tint — a source_color uniform multiplied into COLOR, slider in the Inspector. (This is the harvest hit-flash waiting to happen.)
2. A pulse — brightness oscillating with sin(TIME). Watch what changing the frequency and amplitude does before reading anything more.
3. A UV experiment — output vec4(UV, 0.0, 1.0) and explain the gradient you see. If you can explain that image, you understand UV space; everything else builds on it.

Words that will confuse you (early glossary)#

• fragment — one output pixel's worth of work; your fragment function runs per pixel.
• uniform — a knob: same value for all pixels, settable from GDScript/Inspector (material.set_shader_parameter()).
• UV — this pixel's position within the sprite, 0..1 both axes.
• COLOR vs TEXTURE — the output you're writing vs the image you're sampling.