Grunderna
Steg 1: Canvas Setup <canvas>
Allt börjar med ett <canvas>-element och dess 2D-ritkontext. Canvas är en pixel-baserad yta där JavaScript ritar direkt.
Din första canvas
// HTML
<canvas id="myCanvas" width="400" height="120"></canvas>
// JavaScript
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Rensa hela canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Rita en fylld rektangel
ctx.fillStyle = '#00e5c8';
ctx.fillRect(20, 20, 150, 80);
💡 Viktigt: Canvas-storlek sätts med
width/height-attribut, inte CSS. CSS skalar bara utseendet — attributen bestämmer antalet pixlar. För retina-skärpar: sätt canvas till 2× och skala ner med CSS.
Ritning
Steg 2: Former fillRect · arc · lineTo
Canvas har inbyggda metoder för rektanglar och cirklar. Allt annat byggs med paths.
Interaktiv — Klicka för att byta form
// Rektanglar
ctx.fillStyle = '#00e5c8';
ctx.fillRect(20, 20, 120, 80); // fylld
ctx.strokeStyle = '#ff3d8e';
ctx.lineWidth = 3;
ctx.strokeRect(160, 20, 120, 80); // kontur
Ritning
Steg 3: Paths & Kurvor bezierCurveTo
Med paths kan du rita komplexa former — linjer, bågars, bézier-kurvor och fria figurer.
Kurvor — interaktiv
// Linje-path
ctx.beginPath();
ctx.moveTo(50, 180);
ctx.lineTo(150, 40);
ctx.lineTo(250, 180);
ctx.closePath();
ctx.stroke();
Ritning
Steg 4: Text på Canvas fillText
Rita text med full kontroll över typsnitt, storlek, färg, skugga och justering.
Texteffekter
// Enkel text
ctx.font = 'bold 32px Syne';
ctx.fillStyle = '#00e5c8';
ctx.fillText('Hej Canvas!', 50, 60);
// Text med skugga
ctx.shadowColor = '#ff3d8e';
ctx.shadowBlur = 15;
ctx.fillText('Neon-text', 50, 120);
// Konturtext
ctx.strokeStyle = '#a8e02c';
ctx.lineWidth = 2;
ctx.strokeText('Outline', 50, 180);
Bilder
Steg 5: Ladda & Rita Bilder drawImage
Placera bilder på canvas, beskär dem, ändra storlek — och kombinera med egen grafik.
Genererad bild + drawImage
// Ladda en bild
const img = new Image();
img.src = 'foto.jpg';
img.onload = () => {
// Hela bilden
ctx.drawImage(img, 0, 0);
// Skalad
ctx.drawImage(img, 0, 0, 200, 150);
// Beskuren: (img, sx, sy, sw, sh, dx, dy, dw, dh)
ctx.drawImage(img, 50,50,100,100, 0,0,200,200);
};
// Från annan canvas / video
ctx.drawImage(otherCanvas, 0, 0);
ctx.drawImage(videoElement, 0, 0);
Pixelmanipulation
Steg 6: Pixeldata getImageData · putImageData
Läs och skriv enskilda pixlar. Varje pixel har 4 värden: R, G, B, A (0–255). Det ger total kontroll.
Pixel-genererad bild — klicka för effekt
// Hämta pixeldata
const imageData = ctx.getImageData(0, 0, w, h);
const data = imageData.data; // Uint8ClampedArray
// Loopa varje pixel
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.random() * 255; // R
data[i + 1] = Math.random() * 255; // G
data[i + 2] = Math.random() * 255; // B
data[i + 3] = 255; // A
}
// Skriv tillbaka
ctx.putImageData(imageData, 0, 0);
Ritning
Steg 7: Transformationer translate · rotate · scale
Flytta, rotera och skala koordinatsystemet. Använd save() och restore() för att isolera transformationer.
Roterande mönster
ctx.save(); // Spara tillstånd
ctx.translate(250, 125); // Flytta origo till mitten
ctx.rotate(angle * Math.PI / 180); // Rotera
ctx.scale(1.5, 1.5); // Förstora
ctx.fillRect(-40, -40, 80, 80); // Rita centrerat
ctx.restore(); // Återställ tillstånd
Ritning
Steg 8: Gradienter createLinearGradient
Skapa linjära och radiella gradienter som fillStyle eller strokeStyle.
Gradient-typer
// Linjär gradient
const grad = ctx.createLinearGradient(0,0, 500,0);
grad.addColorStop(0, '#00e5c8');
grad.addColorStop(0.5, '#ff3d8e');
grad.addColorStop(1, '#a8e02c');
ctx.fillStyle = grad;
ctx.fillRect(0,0,500,180);
Ritning
Steg 9: Mönster createPattern
Skapa upprepande mönster från en bild, annan canvas, eller generera egna med OffscreenCanvas.
Genererade mönster
// Skapa mönster med OffscreenCanvas
const tile = document.createElement('canvas');
tile.width = tile.height = 20;
const tc = tile.getContext('2d');
tc.fillStyle = '#00e5c8';
tc.beginPath();
tc.arc(10,10,4,0,Math.PI*2);
tc.fill();
const pattern = ctx.createPattern(tile, 'repeat');
ctx.fillStyle = pattern;
ctx.fillRect(0,0,500,180);
Avancerat
Steg 10: Animation requestAnimationFrame
Animera genom att rensa och rita om canvas ~60 gånger per sekund.
Live-animation — studsande bollar
let animId;
function animate() {
ctx.clearRect(0, 0, w, h);
// Uppdatera positioner
balls.forEach(ball => {
ball.x += ball.vx;
ball.y += ball.vy;
// Studsa vid kanter
if (ball.x < ball.r || ball.x > w - ball.r) ball.vx *= -1;
if (ball.y < ball.r || ball.y > h - ball.r) ball.vy *= -1;
});
// Rita
balls.forEach(ball => {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
ctx.fillStyle = ball.color;
ctx.fill();
});
animId = requestAnimationFrame(animate);
}
Pixelmanipulation
Steg 11: Filter & Effekter ctx.filter
Applicera CSS-liknande filter direkt på canvas, eller manipulera pixlar för egna effekter.
Inbyggda canvas-filter
// CSS-filter på canvas (modern)
ctx.filter = 'blur(3px)';
ctx.filter = 'grayscale(100%)';
ctx.filter = 'sepia(80%) contrast(1.2)';
ctx.filter = 'hue-rotate(90deg)';
ctx.filter = 'invert(100%)';
ctx.filter = 'none'; // återställ
SVG
Steg 12: SVG + JavaScript
Skapa och manipulera SVG-element dynamiskt. SVG är vektorbaserat — skalar utan kvalitetsförlust.
Dynamisk SVG
const svgNS = 'http://www.w3.org/2000/svg';
const svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('width', '400');
svg.setAttribute('height', '200');
// Skapa en cirkel
const circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', '100');
circle.setAttribute('cy', '100');
circle.setAttribute('r', '40');
circle.setAttribute('fill', '#00e5c8');
svg.appendChild(circle);
document.body.appendChild(svg);
Canvas vs. SVG? Canvas = pixel-baserad, bra för spel/foton/tusentals objekt. SVG = vektorbaserad, bra för ikoner/diagram/interaktiva element som behöver skalas och vara tillgängliga via DOM.
Avancerat
Steg 13: Exportera & Ladda ner
Konvertera canvas till en bild (PNG/JPEG) som användaren kan ladda ner, eller använda som <img>-källa.
Generera konstverk & ladda ner
// Konvertera till data-URL
const dataUrl = canvas.toDataURL('image/png');
// Använda som img-källa
const img = document.createElement('img');
img.src = dataUrl;
// Ladda ner som fil
const link = document.createElement('a');
link.download = 'min-bild.png';
link.href = dataUrl;
link.click();
// JPEG med kvalitet (0-1)
canvas.toDataURL('image/jpeg', 0.85);
// Blob (för upload / effektivare)
canvas.toBlob(blob => {
const url = URL.createObjectURL(blob);
// använd url...
}, 'image/png');
Reklam