me.

Tout provient d’une idée.

Tout devient une action.

Penser, dessiner, modéliser, créer : pour faire de l’utilisateur l’élément indispensable du concept.
L’objet n’est plus au centre de l’attention.
Il devient un simple support d’interaction.

Je suis Quentin Rossfelder, designer basé à Paris.
Mon travail ? Rendre l’intuitif accessible, l’interactif évident.

import * as React from "react"

export default function DrawingCanvas(props) {
    const canvasRef = React.useRef(null)
    const [isDrawing, setIsDrawing] = React.useState(false)

    const saveAndRedirect = () => {
        const canvas = canvasRef.current
        const dataURL = canvas.toDataURL("image/png")
        // Sauvegarde dans le navigateur
        localStorage.setItem("savedDrawing", dataURL)
        // Redirection vers la page 2 (change le slash par ton URL)
        window.location.href = "/page-resultat"
    }

    // --- Logique de dessin simple ---
    const start = (e) => {
        const ctx = canvasRef.current.getContext("2d")
        ctx.beginPath()
        ctx.moveTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY)
        setIsDrawing(true)
    }
    const draw = (e) => {
        if (!isDrawing) return
        const ctx = canvasRef.current.getContext("2d")
        ctx.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY)
        ctx.stroke()
    }

    return (
        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
            <canvas
                ref={canvasRef}
                onMouseDown={start}
                onMouseMove={draw}
                onMouseUp={() => setIsDrawing(false)}
                width={500}
                height={400}
                style={{ border: "2px solid black", background: "white", borderRadius: "10px" }}
            />
            <button onClick={saveAndRedirect} style={buttonStyle}>
                Afficher mon dessin !
            </button>
        </div>

Quentin