AI-canvas: Rediger tekst og kode på en ny måde

Bedst til: Samarbejdsskrivning, længere dokumenter, fejlfinding af kode og projekter, der har brug for iterativ forbedring.

Google Gemini Canvas (2026)

Geminis Canvas-arbejdsområde lader dig skrive og redigere dokumenter eller kode, hvor ændringer vises i realtid på din skærm .

Sådan bruger du det:

• Klik på Canvas-knappen under Gemini-promptlinjen for at skifte fra standardchat til et interaktivt arbejdsområde .
• Brug den flydende hurtighededitor-værktøjslinje til at fremhæve specifik tekst og øjeblikkeligt ændre tone, justere længde eller rette formateringsfejl.
• Til kodning kan du generere HTML/CSS/JS og se en live-forhåndsvisning af dine ændringer.

Bedst til: At bygge web-apps, redigere dokumenter med live-forhåndsvisninger og hurtig prototyping.

Mistral le Chat Canvas

Mistrals Canvas er en indbygget editor til at oprette og forfine tekst, kode, regneark og mere, hvor du samarbejder med AI'en direkte i din chat .

Sådan bruger du det:

• Canvas er slået fra som standard i le Chat. For at slå det til skal du åbne menuen Tools nederst i chatvinduet og markere afkrydsningsfeltet ud for Canvas .
• Når det er aktiveret, kan du bede AI'en om at generere eller ændre indhold, og redigeringer vises i realtid i canvas-ruden.
• Du kan også åbne et Canvas eksplicit ved at skrive / i din prompt og vælge "Open a new Canvas" .

Bedst til: Hurtig indholdsoprettelse, redigering af regneark og ligetil tekst- eller kodegenerering.

Byg din egen HTML5 Canvas-teksteditor

For udviklere, der skal bygge en tekst- eller kodeeditor fra bunden med HTML5 <canvas>-API'en, er tilgangen fundamentalt anderledes — du skal genimplementere alle tekstredigeringsprimitiver manuelt, fordi canvas-elementet ikke har nogen indbygget tekstinputkapacitet.

Kerntrin:

• Registrer tastaturhændelser på vinduet og skriv tastetryk ud til canvas'et .
• Implementér markørpositionering og tekstmarkeringsrektangler . Infinite Canvas-tutorialen forklarer, at det at bygge en teksteditor på canvas betyder at genimplementere markørbevægelse, markeringsrektangler og IME-komposition fra bunden .
• Brug mål-API'er som ctx.measureText() og nyere Canvas Text Metrics API'er (getIndexFromOffset, getSelectionRects) til at kortlægge pixelpositioner tilbage til tegnindekser . Disse nyere API'er, foreslået af Igalia, reducerer behovet for brugerdefinerede JavaScript-løsninger .
• Dobbeltklik på tekst for at gå i redigeringstilstand .
• Brug biblioteker som Konva.js eller KineticJS til at forenkle processen ved at tilbyde lag, hitregistrering og transformérbare håndtag .

Alternativ: Til mange brugssituationer er det lettere at bruge HTML-elementer som textarea eller contenteditable frem for at bygge en fuld editor på canvas . Canvas-tilgangen er kun nødvendig, når du har brug for pixel-niveau kontrol over gengivelse (f.eks. til et designværktøj eller en brugerdefineret tegne-app).

Hvilket canvas skal du vælge?

Konklusion: Hvis du er skribent eller koder, så brug et af AI-canvas-værktøjerne. Hvis du bygger en brugerdefineret applikation, der har brug for præcis gengivelse, giver HTML5-canvas-tilgangen dig fuld kontrol — men vær forberedt på den ekstra udviklingsindsats.