Neon Dungeon: Rogue Crawler · Step 1 of 4

Initializing Canvas & Player Sprite

Welcome to Neon Dungeon: Rogue Crawler! In this first step, you will initialize the 2D rendering canvas, establish world coordinates, and render your player hero—a glowing cyan knight sprite rectangle at position (x: 180, y: 180). Learn how 2D Graphics APIs work across JavaScript, Python, and Java, and observe how each language manages canvas contexts and rendering calls.

What you will learn

2D Screen Coordinate System: Computer graphics grids place origin (0, 0) at the top-left corner. Increasing X moves right, and increasing Y moves down.
Player Entity Properties: An entity in 2D games is defined by positional coordinates (x, y), dimensions (width, height), and visual color attributes.

Open this interactive lesson · Browse all lessons

In the editor, complete the marked TODOs. Use Stuck on a TODO? to reveal hints or a worked example, then run the lesson checks.