HTML Canvas

<canvas>-elementet brukes til å tegne grafikk via JavaScript. Det er et tomt lerret vi kan bruke til å lage enkle figurer, interaktiv grafikk og spill.

1. Grunnleggende Setup

For å koble et HTML-element sammen med JavaScript bruker vi bind:this og binder til en variabel som vi kaller canvas. Siden vi ikke kan begynne å tegne før siden er ferdig lastet, knytter vi tegningen til en knapp med onclick={tegnNoe}.

Inne i funksjonen må vi opprette en context-variabel (ofte kalt ctx). Det er selve verktøykassen som gir oss alle tegnekommandoer.

💡 Viktig: På et canvas starter posisjonen (x: 0, y: 0) i det øverste venstre hjørnet. X-verdien (bredden) øker mot høyre, mens Y-verdien (høyden) øker når du går nedover.

<script>
  let canvas;

  function tegnNoe() {
    let context = canvas.getContext("2d");
    // Bruk context for å tegne figurer her
  }
</script>

<canvas bind:this={canvas} width="200" height="200"></canvas>
<button type="button" onclick={tegnNoe}>Tegn!</button>

2. Interaktivt Eksempel

Her tegner vi en boks med en sirkel i midten. Dette viser hvordan du setter bakgrunnsfarge (boks) og tegner formen på sirkelen. Endre verdiene for å oppdatere og se koden endre seg!

function tegnInteraktivt() {
  let context = interaktivCanvas.getContext("2d");

  // 1. Bytte til valgt boksfarge og fylle
  context.fillStyle = "#ffffff";
  context.fillRect(0, 0, 300, 200);

  // 2. Tegne ny sirkel
  context.beginPath();
  context.arc(150, 100, 50, 0, 2 * Math.PI);
  context.fillStyle = "#ff0000";
  context.fill();
}

Viktige Canvas Kommandoer

KommandoFunksjonMinimalt eksempel
fillStyle / strokeStyleBrukes til å bytte farge på innhold (fill) og omriss (stroke).context.fillStyle = "red";
fillRect(x, y, bredde, høyde)Tegner en "rect" (fylt boks). Ofte brukt for å sette bakgrunnsfarge over hele canvas.context.fillRect(0, 0, 400, 400);
strokeRect(x, y, bredde, høyde)Tegner linjen (rammen) til en boks uten å fylle den.context.strokeRect(50, 50, 100, 100);
clearRect(x, y, bredde, høyde)Visker ut innhold for å gi et gjennomsiktig område (f.eks tømme alt før neste bilde).context.clearRect(0, 0, 400, 400);
beginPath()Starter en ny vei (path). Helt nødvendig før vi tegner sirkler eller nye linjer, ellers kobles alt sammen!context.beginPath();
arc(x, y, radius, start, slutt)Definerer formen til en sirkel eller bue.context.arc(100, 100, 50, 0, 2 * Math.PI);
fill() / stroke()Gjennomfører utfyllingen (fill) eller strekingen (stroke) av den definerte sirkelen eller stien.context.fill();