CMPCanvas

**CMPCanvas** is a Kotlin Multiplatform library for creating and managing a customizable drawing canvas in your Compose apps. It supports different tools like pen, brush, marker, and eraser, and allows exporting the drawn content as images.

---

Features

• Multiple drawing tools: Pen, Brush, Marker, and Eraser with customizable stroke thickness and color.
• Additional native tools from PencilKit in iOS: PenilKit tools operability (Use CanvasField directly instead of CanvasView if you want the same tools as android)
• Undo/Redo support for user-friendly editing.
• Clear all functionality to reset the canvas.
• Export drawings as PNG images.
• Composable-friendly: Fully compatible with Jetpack Compose and Compose Multiplatform.
• Programmatic Access to Canvas – Developers can retrieve the current drawing as an ImageBitmap and save it or send it to a server.
• Cross-platform support: Works with Android, iOS (Compose Multiplatform), and Web (wasmJS supported).

---

📦 Installation

Add the library to your Gradle dependencies:

repositories {
    mavenCentral()
}

dependencies {
    implementation("network.chaintech:cmp-canvas:1.0.0")
}

IOS Permission setup

Add this in info.plist to save/export to photos or it will crash

<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs your permission to save your drawing to the Photos library.</string>

Simple Canvas Usage

val graphicsLayer = rememberGraphicsLayer()
val controller = CanvasController(graphicsLayer)
val scope = rememberCoroutineScope()

CanvasView(
controller = controller,
canvasWidth = 330.dp,
canvasHeight = 800.dp,
canvasMode = CanvasMode.DRAWING
)

~canvasMode = CanvasMode.DRAWING – Standard freehand drawing. ~canvasMode = CanvasMode.SIGNATURE – Signature pad with only essential toolbar (undo, redo, clear, export).

Getting Current Image from Canvas

scope.launch {
    val bitmap = controller.getImageBitmap() // suspend function
    bitmap?.let {
        // Use bitmap or convert it to PNG byte array
        val pngByteArray = bitmap.encodeToPngBytes(100)
    }
}

~Retrieves the current canvas content as ImageBitmap. ~Can be used in custom submit buttons instead of relying on the toolbar export.

🧑‍💻 Author

Chaintech Network
[](https://github.com/Chain…
[](https://www.linkedin.com/showcas…
[](https://medium.com/mobile-innovation-…