Back to Examples |

Real-Time Collaborative Canvas

WebSocket Demo

A real-time collaborative drawing canvas powered by Flaxon WebSockets. Draw with others in real-time.

Controls

3px
1 online ● Connected

Flaxon WebSocket Backend

canvas_backend.py
from flaxon import Flaxon, WebSocket, WebSocketDisconnect

app = Flaxon("canvas-backend", debug=True)

# Store drawing strokes
strokes = []

@app.websocket("/ws/canvas")
async def canvas_socket(socket: WebSocket):
    await socket.accept()
    await socket.join("canvas-room")

    # Send existing strokes to new user
    for stroke in strokes:
        await socket.send_json(stroke)

    try:
        async for message in socket.iter_json():
            # Store stroke
            strokes.append(message)
            # Broadcast to all connected clients
            await socket.broadcast_json("canvas-room", message)

    except WebSocketDisconnect:
        await socket.leave("canvas-room")

@app.get("/api/canvas/clear")
async def clear_canvas():
    strokes.clear()
    return {"cleared": True}