Oppgaver: HTML Canvas

Her skal du øve på å tegne med <canvas> i HTML og JavaScript. Gjenskap figurene du ser under!

Generelle tips for alle oppgaver:
1. Lag et <canvas width="..." height="..."></canvas> i HTML-en din.
2. Bruk bind:this={variabelNavn} for å koble på en JavaScript variabel.
3. Hent ut verktøykassen med let ctx = variabelNavn.getContext("2d");
4. Du må gjerne kjøre tegnekoden i en funksjon som trigges av en knapp (onclick).

Nivå 1: Lett

❌ Grønt Kryss

Bruk moveTo, lineTo og stroke til å tegne to grønne linjer som krysser hverandre, over en svart bakgrunn (bruk fillRect).

Tegn dette (200x200):

Nivå 1: Lett

🔲 Rammemakeren

Bruk strokeStyle og strokeRect for å tegne et blått omriss.

Tegn dette (200x200 lerret, boks fra 50,50 som er 100x100):

Nivå 2: Medium

🇫🇷 Flaggdesigner

Kombiner tre fargede rektangler ved siden av hverandre for å bygge et flagg.

Tegn dette (Bredde: 300, Høyde: 200):

Nivå 2: Medium

🎨 Interaktive Farger

Legg til en <input type="color" bind:value=...> og en knapp for å male lerretet i valgt farge.

Bygg noe som dette (Prøv fargevelgeren!):


Nivå 3: Avansert

🙂 Smiley

Bruk flere arc for å tegne et ansikt med øyne og en munn, med svart strek. Kanskje må du justere start/slutt for stiene dine?

Tegn dette (200x200):

Nivå 3: Avansert

⌚ Klokkebygger

Kombiner sirkler og linjer for å tegne en analog klokke uten tall. Bruk arc til klokkehuset og senterpunktet, og moveTo / lineTo for viserne.

Tegn dette (200x200):

🐞 Feilsøking 1

Krasj på siden!

Koden krasjer og gir TypeError: Cannot read properties of undefined i konsollen!

<script>
  let canvas;
     let ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 100, 100);
</script>

<canvas bind:this={canvas} width="200" height="200"></canvas>

Oppgave:

Rett kodens plassering.

🐞 Feilsøking 2

Merkelig Picasso-kunst

Du prøver å tegne en rød og en blå sirkel. Men av en eller annen grunn blir begge blå, og en strek går i mellom dem! Hva mangler før sirkel nummer 2?

// Sirkel 1 - rød
ctx.fillStyle = "red";
ctx.arc(50, 50, 20, 0, 2 * Math.PI);
ctx.fill();

// Sirkel 2 - blå
ctx.fillStyle = "blue";
ctx.arc(150, 50, 20, 0, 2 * Math.PI);
ctx.fill();

Oppgave:

Hva ble glemt for å skille formene fra hverandre?