SimpleCanvasLibrary Demos

Drawing and Simple Animation

Drawing examples using GameCanvas

Simple Drawing Example

Shows how to create a drawing using the GameCanvas class.

View Demo

Simple Animation Using Elapsed Time

Shows how to update a drawing over time using total elapsed time.

View Demo

drawing animation timing

Simple Moving Drawing (Step Time)

Shows how to animate drawings using step time for consistent frame-based movement.

View Demo

drawing animation timing

Gravity Simulation with UI Controls

Interactive gravity simulation with UI controls for adjusting parameters.

View Demo

game-interface physics interactive animation

Events and Interaction

Handling user input and interaction

Simple Click Handler

Shows how to handle click events with GameCanvas.

View Demo

interactive click events basics

Simple Mouse Move Handler

Shows how to handle mouse movement events with GameCanvas.

View Demo

interactive mouse events

Resize Handling

Demonstrates automatic canvas resizing, resize event handling, and responsive drawing that adapts to canvas size.

View Demo

resize responsive orientation

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

GameInterface UI

Creating user interfaces with GameInterface

GameInterface with Buttons

Shows how to create interactive buttons using the GameInterface class.

View Demo

game-interface buttons interactive

GameInterface Complete Example

Comprehensive demo showing all GameInterface features: buttons, sliders, and number inputs.

View Demo

game-interface buttons inputs sliders interactive

Animation and Sprites

Animating graphics and using sprites

Basic Animation Example

Demonstrates simple animation with moving shapes using GameCanvas.

View Demo

animation basics getting-started

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

Browse by Tag

Find demos by their specific features and topics

#advanced

Advanced techniques and patterns

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

Fancy Click Handler

Advanced click handling with visual feedback and color changes.

View Demo

interactive click events advanced

#analysis

Analysis and inspection utilities

Cat Spritesheet Inspector

Shows the raw spritesheet to help determine frame dimensions and layout.

View Demo

sprites debugging spritesheet analysis

#animation

Animation and movement examples

Add and Remove Shapes

Interactive demo showing how to dynamically add and remove shapes using GameInterface buttons.

View Demo

game-interface buttons interactive animation shapes

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

Basic Animation Example

Demonstrates simple animation with moving shapes using GameCanvas.

View Demo

animation basics getting-started

Gravity Simulation with UI Controls

Interactive gravity simulation with UI controls for adjusting parameters.

View Demo

game-interface physics interactive animation

Simple Cat Sprite (Static Position)

Basic sprite animation example using a cat spritesheet with stationary display.

View Demo

sprites animation basics spritesheet

Simple Animation Using Elapsed Time

Shows how to update a drawing over time using total elapsed time.

View Demo

drawing animation timing

Simple Moving Drawing (Step Time)

Shows how to animate drawings using step time for consistent frame-based movement.

View Demo

drawing animation timing

#basics

Fundamental concepts and getting started

Basic Animation Example

Demonstrates simple animation with moving shapes using GameCanvas.

View Demo

animation basics getting-started

Simple Cat Sprite (Static Position)

Basic sprite animation example using a cat spritesheet with stationary display.

View Demo

sprites animation basics spritesheet

Simple Click Handler

Shows how to handle click events with GameCanvas.

View Demo

interactive click events basics

Simple Drawing Example

Shows how to create a drawing using the GameCanvas class.

View Demo

drawing basics getting-started

#buttons

Interactive button components

Add and Remove Shapes

Interactive demo showing how to dynamically add and remove shapes using GameInterface buttons.

View Demo

game-interface buttons interactive animation shapes

GameInterface Complete Example

Comprehensive demo showing all GameInterface features: buttons, sliders, and number inputs.

View Demo

game-interface buttons inputs sliders interactive

GameInterface with Buttons

Shows how to create interactive buttons using the GameInterface class.

View Demo

game-interface buttons interactive

#click

Click event handling

Fancy Click Handler

Advanced click handling with visual feedback and color changes.

View Demo

interactive click events advanced

Simple Click Handler

Shows how to handle click events with GameCanvas.

View Demo

interactive click events basics

#debugging

Development and debugging tools

Cat Spritesheet Inspector

Shows the raw spritesheet to help determine frame dimensions and layout.

View Demo

sprites debugging spritesheet analysis

#dialog

Dialog boxes and modals

GameInterface with Dialog

Shows how to create a dialog box using the GameInterface class.

View Demo

game-interface dialog interactive

#drawing

Canvas drawing techniques

Simple Drawing Example

Shows how to create a drawing using the GameCanvas class.

View Demo

drawing basics getting-started

Simple Animation Using Elapsed Time

Shows how to update a drawing over time using total elapsed time.

View Demo

drawing animation timing

Simple Moving Drawing (Step Time)

Shows how to animate drawings using step time for consistent frame-based movement.

View Demo

drawing animation timing

#events

Event handling (clicks, mouse movement, etc.)

Fancy Click Handler

Advanced click handling with visual feedback and color changes.

View Demo

interactive click events advanced

Simple Click Handler

Shows how to handle click events with GameCanvas.

View Demo

interactive click events basics

Simple Mouse Move Handler

Shows how to handle mouse movement events with GameCanvas.

View Demo

interactive mouse events

#game-interface

GameInterface class with UI controls

Add and Remove Shapes

Interactive demo showing how to dynamically add and remove shapes using GameInterface buttons.

View Demo

game-interface buttons interactive animation shapes

GameInterface Complete Example

Comprehensive demo showing all GameInterface features: buttons, sliders, and number inputs.

View Demo

game-interface buttons inputs sliders interactive

GameInterface with Buttons

Shows how to create interactive buttons using the GameInterface class.

View Demo

game-interface buttons interactive

GameInterface with Dialog

Shows how to create a dialog box using the GameInterface class.

View Demo

game-interface dialog interactive

Gravity Simulation with UI Controls

Interactive gravity simulation with UI controls for adjusting parameters.

View Demo

game-interface physics interactive animation

#getting-started

Perfect for beginners learning the library

Basic Animation Example

Demonstrates simple animation with moving shapes using GameCanvas.

View Demo

animation basics getting-started

Simple Drawing Example

Shows how to create a drawing using the GameCanvas class.

View Demo

drawing basics getting-started

#inputs

Number and text input fields

GameInterface Complete Example

Comprehensive demo showing all GameInterface features: buttons, sliders, and number inputs.

View Demo

game-interface buttons inputs sliders interactive

#interactive

User interaction and input handling

Add and Remove Shapes

Interactive demo showing how to dynamically add and remove shapes using GameInterface buttons.

View Demo

game-interface buttons interactive animation shapes

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

Fancy Click Handler

Advanced click handling with visual feedback and color changes.

View Demo

interactive click events advanced

GameInterface Complete Example

Comprehensive demo showing all GameInterface features: buttons, sliders, and number inputs.

View Demo

game-interface buttons inputs sliders interactive

GameInterface with Buttons

Shows how to create interactive buttons using the GameInterface class.

View Demo

game-interface buttons interactive

GameInterface with Dialog

Shows how to create a dialog box using the GameInterface class.

View Demo

game-interface dialog interactive

Gravity Simulation with UI Controls

Interactive gravity simulation with UI controls for adjusting parameters.

View Demo

game-interface physics interactive animation

Simple Click Handler

Shows how to handle click events with GameCanvas.

View Demo

interactive click events basics

Simple Mouse Move Handler

Shows how to handle mouse movement events with GameCanvas.

View Demo

interactive mouse events

#mouse

Mouse tracking and interaction

Simple Mouse Move Handler

Shows how to handle mouse movement events with GameCanvas.

View Demo

interactive mouse events

#mouse-following

Interactive mouse tracking

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

#orientation

Screen orientation handling

Resize Handling

Demonstrates automatic canvas resizing, resize event handling, and responsive drawing that adapts to canvas size.

View Demo

resize responsive orientation

#physics

Physics simulations and effects

Gravity Simulation with UI Controls

Interactive gravity simulation with UI controls for adjusting parameters.

View Demo

game-interface physics interactive animation

#resize

Canvas resizing and responsive design

Resize Handling

Demonstrates automatic canvas resizing, resize event handling, and responsive drawing that adapts to canvas size.

View Demo

resize responsive orientation

#responsive

Responsive canvas behavior

Resize Handling

Demonstrates automatic canvas resizing, resize event handling, and responsive drawing that adapts to canvas size.

View Demo

resize responsive orientation

#shapes

Dynamic shape creation and manipulation

Add and Remove Shapes

Interactive demo showing how to dynamically add and remove shapes using GameInterface buttons.

View Demo

game-interface buttons interactive animation shapes

#sliders

Slider input controls

GameInterface Complete Example

Comprehensive demo showing all GameInterface features: buttons, sliders, and number inputs.

View Demo

game-interface buttons inputs sliders interactive

#sprites

Working with sprite graphics

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

Simple Cat Sprite (Static Position)

Basic sprite animation example using a cat spritesheet with stationary display.

View Demo

sprites animation basics spritesheet

Cat Spritesheet Inspector

Shows the raw spritesheet to help determine frame dimensions and layout.

View Demo

sprites debugging spritesheet analysis

#spritesheet

Using sprite sheets for animation

Advanced Cat Sprite (Mouse Following)

Interactive cat sprite that follows your mouse cursor with walking animation from a real spritesheet.

View Demo

sprites animation mouse-following spritesheet interactive advanced

Simple Cat Sprite (Static Position)

Basic sprite animation example using a cat spritesheet with stationary display.

View Demo

sprites animation basics spritesheet

Cat Spritesheet Inspector

Shows the raw spritesheet to help determine frame dimensions and layout.

View Demo

sprites debugging spritesheet analysis

#timing

Time-based animation (elapsed time, step time)

Simple Animation Using Elapsed Time

Shows how to update a drawing over time using total elapsed time.

View Demo

drawing animation timing

Simple Moving Drawing (Step Time)

Shows how to animate drawings using step time for consistent frame-based movement.

View Demo

drawing animation timing