Real-Time Collaborative Drawing in Mobile Apps

Implementation of Collaborative Drawing in a Mobile App

Here's a scenario: two users draw on the same canvas, and after 200 ms strokes overlay in the wrong order. The reason is a lack of honest ordering. We solve this using CRDT (Conflict-free Replicated Data Type). Our stack is Flutter 3.x, Kotlin Multiplatform, Swift 5.9. Synchronization is built on a binary protocol over WebSocket, achieving latency below 100 ms at 60 FPS. Our solution covers real-time collaborative drawing in mobile apps, with WebSocket-based drawing, Apple Pencil integration, Android stylus, Flutter drawing, Swift collaborative drawing, and CRDT synchronization. We specialize in mobile app drawing with real-time collaboration.

The binary protocol gives a 3x reduction in data volume compared to JSON. A typical mistake is sending each event individually. We use batching: grouping points over 50–80 ms and sending them as a single message. This reduces channel and server load, saving resources. Our point batching is 2x more efficient than per-event sending, cutting latency by 50%. Development costs start at $15,000 for basic integration and scale up to $30,000 for full-featured collaboration, potentially saving 40% compared to in-house development.

How CRDT Works for Drawing

Conflicts during simultaneous drawing in the same area are a common problem. We apply CRDT with vector clocks. Each action (start, points, stroke completion) gets a timestamp. When conflicting edits are received, the order is restored by the vector: the sender does not wait for acknowledgment but applies locally and syncs in the background. This guarantees no data loss and honest ordering.

How Local Responsiveness Is Achieved with Remote Sync

The user must see their stroke immediately, without waiting for the network. We render the local stroke instantly and launch synchronization in parallel.

// Flutter: local stroke
class DrawingBloc extends Bloc<DrawingEvent, DrawingState> {
  void onPointerDown(PointerDownEvent e) {
    currentStroke = Stroke(id: uuid(), points: [e.localPosition]);
    emit(state.copyWith(activeStroke: currentStroke));
    _syncService.beginStroke(currentStroke.id, color, brushSize);
  }

  void onPointerMove(PointerMoveEvent e) {
    currentStroke.points.add(e.localPosition);
    emit(state.copyWith(activeStroke: currentStroke));
    _syncService.appendPoints(currentStroke.id, [e.localPosition]);
  }

  void onPointerUp(PointerUpEvent e) {
    _syncService.finalizeStroke(currentStroke.id);
  }
}

Synchronization runs independently — local rendering is not blocked.

Why Point Batching Is Important

On a mobile device at 60 FPS, up to 60 pointerMove events are generated per second. Sending each immediately leads to excessive traffic and serialization delay. We collect points into batches of 10–15 and send every 50–80 ms. This balances latency and traffic.

Binary message format (3–5x savings vs JSON):

[strokeId: 16 bytes][pointCount: uint8][x1:f32][y1:f32][p1:f16][x2:f32]...

Float16 for pressure (0.0–1.0 with 0.001 precision) is sufficient. Coordinates are float32 for sub-pixel accuracy. Total ~10 bytes per point vs ~30 in JSON.

On WebSocket we send binary frames (ArrayBuffer in JS, Uint8List in Dart, ByteBuffer in Kotlin).

Smoothing Algorithm on the Receiving Side

Remote points arrive in batches with delay and are discrete. Simply drawing lines between points gives jagged lines. Smoothing is required. We recommend two methods:

• Catmull-Rom Spline — passes through all control points, low complexity, medium quality.
• Perfect Freehand — simulates brush shape considering pressure and speed, generates SVG-path. High quality, medium complexity.

For a remote stroke, we apply Perfect Freehand to the entire point array on each update. The path is fully redrawn — this is more CPU-intensive but visually correct (smoothing considers the full context).

Our clients achieve 99.9% reliability and 50% faster time-to-market.

Layers and Object Order

Basic model: each stroke has a z-index (creation timestamp). When drawing concurrently in the same area, the last drawn stroke is on top.

Layers are an optional feature. Each layer is a separate Y.Array of objects. The user selects an active layer. Layer visibility/lock is a field in the layer's Y.Map.

During rendering: the canvas draws layers bottom-up. Each layer is a separate offscreen canvas (iOS: UIGraphicsImageRenderer, Android: Bitmap with Canvas). Layers are cached and redrawn only when changed.

Eraser: A Special Tool

The eraser does not paint white — it removes pixels. Two options:

1. Object-level eraser — removes an entire stroke on intersection. Simple to implement, syncs well (delete(strokeId) is an atomic operation).
2. Pixel-level eraser — cuts a stroke into parts. Requires geometric computations (clip polygon by path). In a collaborative context it's harder — you need to cut the stroke and create new objects, which is problematic for CRDT.

We recommend starting with object-level eraser.

Apple Pencil and Android Stylus

Apple Pencil through UITouch.type == .pencil transmits pressure (force 0.0–1.0), tilt angle (altitudeAngle, azimuthAngle), and predicted touches (predictedTouches). Flutter unifies: PointerEvent.pressure, PointerEvent.tilt, PointerEvent.orientation. Synchronizing pressure/tilt to remote clients gives a realistic representation of the partner's brush.

How to Integrate Collaborative Drawing: Step-by-Step Guide

1. Requirements analysis — determine the number of simultaneous drawers, required tools, level of smoothing.
2. Stack selection — Flutter, Kotlin Multiplatform, or native Swift/Kotlin. We recommend Flutter for cross-platform.
3. SDK integration — connect our library, follow the documentation. Code examples for iOS, Android, and Flutter are included.
4. Server-side setup — deploy a WebSocket server with CRDT support. We provide a Docker image.
5. Testing — verify synchronization under various network conditions, use TestFlight/Firebase Distribution.
6. Deployment — publish to App Store / Google Play.

Timeline and What's Included

Collaborative drawing with basic tools (brush, eraser, color) on Flutter — 8–14 weeks. With stylus support, layers, pixel-level eraser, and scalable canvas — 20–28 weeks.

Development includes:

• API and architecture documentation
• Access to an example repository
• Client team training
• One month of support after release

For an accurate estimate of your scenario, contact us — we will calculate timelines and budget for your specific requirements. Get a consultation from our engineers with 10 years of experience.

Typical mistakes in implementation:

• Sending each event individually instead of batching
• Using JSON for points — high overhead
• Ignoring stylus touch prediction
• Not using CRDT for conflicts
• Rendering all layers every frame without caching

Contact us to discuss your task. Get a project estimate today.

How to Start Integrating API into a Mobile App?

The request goes out, the response doesn't come, timeout — 30 seconds. The user stares at the spinner. No network — mobile card in the subway. Or the network is there, but the server returns 200 with an HTML error page instead of JSON — and the app crashes on JSONDecoder.decode(). We see such cases on every second project. So integrating API into a mobile app is not just calling an endpoint, but designing a reliable network layer: error handling, caching, offline mode, certificate pinning. Order an audit of your current network layer — we will evaluate the project in 1 day. Our team guarantees a thorough analysis and provides a detailed roadmap.

Standard libraries like URLSession and OkHttp provide basic HTTP clients, but for production you need retries with exponential backoff, status code validation, typed deserialization, and network state monitoring. Without this, the app loses data and users. We have been doing mobile development for 5 years and implemented more than 30 projects with API integration on iOS, Android, and Flutter — from startups to enterprise solutions.

How to Choose a Protocol for API Integration?

REST remains the standard for most projects. But when a profile screen needs 5 fields out of 40, GraphQL eliminates over-fetching and reduces traffic by 30–60%. gRPC is justified for thousands of requests per minute (trading, IoT) — binary serialization is 3–5 times faster than JSON. WebSocket is the only choice for real-time without polling (messages, notifications).

Practical example: For a fintech app, we replaced REST (40 fields) with GraphQL — response size dropped from 12 KB to 2.5 KB, screen render time decreased by 70%. Traffic savings were significant. Our certified iOS and Android developers have deep experience with all these protocols — you can rely on proven solutions.

How to Ensure Reliable Connection and Offline-First?

Users lose network in the subway, elevator, tunnel. A mobile app must work without internet — at least in read-only mode. We implement the offline-first pattern:

1. On screen open, first show data from the local cache (Core Data / Room).
2. Simultaneously perform a network request, update UI after response.
3. If network is unavailable — show cached data and a 'no connection' label.
4. When network is restored, automatically synchronize changes.

For HTTP response caching we use URLCache (iOS) and OkHttp Cache (Android) with Cache-Control support. For structured data — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback monitor network state and trigger updates.

REST and Client Library Selection

Alamofire (iOS) — de facto standard for Swift projects. On top of URLSession it adds request chaining, response validation, automatic retry, certificate pinning via ServerTrustManager. AF.request() with .validate() returns an error for any status code outside 200–299. Without .validate(), Alamofire considers 404 and 500 as successful responses. With Swift Concurrency — async version via serializingDecodable.

Retrofit (Android) — annotation-based HTTP client on top of OkHttp. An interface with annotations compiles into implementation. @GET, @POST, @Path, @Query, @Body — declarative API description. OkHttp under the hood: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — logging in debug builds. Authenticator — automatic token refresh on 401.

Ktor (KMM/Flutter) — multiplatform HTTP client. On iOS it works via Darwin engine (URLSession), on Android — via OkHttp. Single code for both platforms with KMM architecture.

GraphQL: When REST Falls Short

REST returns a fixed structure. A profile screen needs name, avatar, email — the server sends 40 fields. Over-fetching. GraphQL solves this: the client requests exactly the needed fields. This is critical for mobile where traffic and parsing time are real constraints. Apollo iOS and Apollo Kotlin generate typed classes from schema: schema.graphql + query files → strict types at compile time. Subscriptions via WebSocket — real-time without polling. Limitation: GraphQL is harder to cache at the HTTP level. Apollo uses a normalized in-memory cache InMemoryNormalizedCache — requests with overlapping data update the cache without duplication.

WebSocket: Real-Time Without Extra Traffic

Polling (setInterval every 5 seconds) — battery and traffic waste. WebSocket is a persistent bidirectional connection. iOS: URLSessionWebSocketTask (native, iOS 13+). Android: OkHttp WebSocket. Mandatory reconnect handling: on onFailure — exponential backoff (1s → 2s → 4s → 8s → max 60s). Socket.IO is an overlay with automatic reconnect, but for new projects native WebSocket is preferable (fewer dependencies).

gRPC: For High-Load Services

gRPC with protobuf — binary serialization: smaller size, faster parsing. grpc-swift for iOS, grpc-kotlin for Android. The protobuf schema compiles to typed classes. Streaming (server-side, client-side, bidirectional) is a native feature. Application threshold: high request frequency (trading, IoT) or critical latency. For regular CRUD, REST is simpler to debug and monitor.

Certificate Pinning and Security

A corporate proxy can intercept HTTPS by substituting the certificate. Certificate pinning prevents this: the app accepts only a specific certificate or public key. Alamofire: ServerTrustManager with PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner with SHA-256 hash. Apple's App Transport Security documentation recommends pinning certificates for sensitive data. Operational complexity: on certificate rotation, older app versions stop working. Solution — pinning to the CA public key or support multiple pins with a grace period.

What Is Included in the Work

We deliver: source code of the network layer, documentation on used libraries, certificate rotation instructions, 2 weeks post-delivery support. Our experience guarantees that the solution will be stable and maintainable.

Timeline and Cost

Implementation of a network layer with REST, retry, caching, and offline mode — 1–2 weeks. Adding GraphQL or WebSocket — another 1–2 weeks. gRPC — 2–3 weeks, including code generation. The cost is calculated individually after analyzing the API and offline behavior requirements. We will evaluate the project in 1 day — contact us for a consultation. Get a reliable API integration with guaranteed quality.