Compose UI Canvas API Community Challenge

ScribbleDash

A highly interactive digital canvas drawing app exploring raw Android UI drawing performance in Jetpack Compose.

ScribbleDash Mockup

The Overview

ScribbleDash shows my skills in manipulating Android's drawing APIs natively integrated via Compose constraints. Through game modes like "One Round Wonder", it challenges users with varied difficulty canvases, implementing real-time gesture extraction, history state arrays (Undo/Redo), and smooth vector stroke rendering.

The Challenge

Creating an interactive drawing app on Compose means continuously recalculating Bezier paths across high-frequency pointer capture events. Without optimized rendering strategies, the draw loop stutters.

It gets more complex when tracking drawing paths in memory for an "Undo/Redo" stack of custom brush strokes without inducing out-of-memory exceptions over long usage periods, while integrating the entire structure cleanly around a domain-driven architectural package.

Architecture & Technical Decisions

To provide excellent drawing performance, I utilized native Jetpack Compose `Canvas` layouts wrapped entirely inside an optimized multi-package layered architecture.

Optimized Path Execution

  • Path Traversal: Rather than reconstructing the entire canvas every frame, individual paint strokes are cached as `Path` matrices, preventing deep recomposition triggers until absolutely necessary. State arrays maintain the last 5 vectors for reliable Undo/Redo cycles.
  • Pseudo-Modular Folder Structuring: Although single-module natively, packages (`features/gamemodes/`, `features/draw/`) are completely horizontally segregated. Game modes can be hot-swapped or expanded massively without bleeding business logic into unrelated domains.
  • Dependency Tracking: The DI framework handles injecting specific game mode states entirely decoupled from the base Compose UI layouts.

Impact & Results

  • Consistent 60FPS Draw Rate achieved natively under intense computational pointer capture loops by limiting wide tree recompositions.
  • Solid Undo/Redo Engine maintained without triggering extreme heap allocations or stack overflows over extensive play sessions.
  • Scalable Game State Navigation powered by Koin to inject independent UI experiences dynamically per isolated package directory.

The Tech Stack

Language Kotlin
UI Framework Jetpack Compose
DI Framework Koin
Design System Material Design 3
Testing & Debug JUnit & Timber