INTCSS: Canvas | SeeDocx

📖 Introduction 🖌️ Rendering Context 🌐 Browser Support 📐 Drawing Rectangles 🛤️ Drawing Paths 📏 Drawing Lines 🪢 Bezier Curves 📈 Quadratic Curves 🖼️ Using Images 🎨 Create Gradients 🎨 Styles and Colors 📝 Text and Fonts ✨ Pattern and Shadow 💾 Save and Restore States 🔄 Translation 🎬 Animation

📖 1. Introduction à Canvas

L'élément <canvas> d'HTML5 permet de dessiner des graphiques dynamiques via JavaScript. Idéal pour les animations, jeux, visualisations de données et applications interactives.

❌ Avant Canvas

Images statiques
Animations Flash (plugins)
Pas d'interactivité dynamique

✅ Avec Canvas

Dessin dynamique en JavaScript
Animations temps réel
Totalement programmable

📝 Syntaxe de base

<canvas id="monCanvas" width="400" height="200" style="border:1px solid #ddd;">
    Votre navigateur ne supporte pas canvas.
</canvas>

<script>
    const canvas = document.getElementById('monCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#3498db';
    ctx.fillRect(50, 50, 100, 100);
</script>

✨ Résultat

🖌️ 2. The Rendering Context

Le contexte de rendu est l'objet qui contient toutes les méthodes de dessin.

// Contexte 2D (le plus courant)
const canvas = document.getElementById('monCanvas');
const ctx = canvas.getContext('2d');

// Contexte 3D (WebGL)
const gl = canvas.getContext('webgl');

// Contexte 3D (WebGL2)
const gl2 = canvas.getContext('webgl2');

💡 Astuce : Vérifiez toujours si le contexte est disponible avant de dessiner.

🌐 3. Browser Support

🌐

Chrome

✅ Supporté

🦊

Firefox

✅ Supporté

🧭

Safari

✅ Supporté

🌍

Edge

✅ Supporté

⚡

Opera

✅ Supporté

// Détection du support Canvas
const canvas = document.getElementById('monCanvas');
if (canvas.getContext) {
    const ctx = canvas.getContext('2d');
    console.log('Canvas supporté !');
} else {
    console.log('Canvas non supporté par ce navigateur');
}

📐 4. Drawing Rectangles

// Rectangle plein
ctx.fillStyle = '#3498db';
ctx.fillRect(x, y, width, height);

// Rectangle contour
ctx.strokeStyle = '#e74c3c';
ctx.strokeRect(x, y, width, height);

// Rectangle transparent (efface)
ctx.clearRect(x, y, width, height);

📝 Exemple : Rectangles

🛤️ 5. Drawing Paths

ctx.beginPath();      // Commencer un nouveau chemin
ctx.moveTo(x, y);     // Déplacer le curseur
ctx.lineTo(x, y);     // Tracer une ligne
ctx.arc(x, y, r, startAngle, endAngle); // Arc de cercle
ctx.closePath();      // Fermer le chemin
ctx.fill();           // Remplir
ctx.stroke();         // Tracer le contour

📝 Exemple : Cercle et triangle

📏 6. Drawing Lines

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 100);
ctx.lineTo(250, 50);
ctx.lineWidth = 3;
ctx.strokeStyle = '#2c3e66';
ctx.stroke();

📝 Exemple : Lignes

🪢 7. Bezier Curves

// Courbe de Bézier cubique (2 points de contrôle)
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.bezierCurveTo(100, 20, 200, 180, 350, 100);
ctx.stroke();

📝 Exemple : Courbe de Bézier

📈 8. Quadratic Curves

// Courbe quadratique (1 point de contrôle)
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.quadraticCurveTo(200, 20, 350, 100);
ctx.stroke();

📝 Exemple : Courbe quadratique

🖼️ 9. Using Images

const img = new Image();
img.src = 'image.jpg';
img.onload = () => {
    ctx.drawImage(img, x, y, width, height);
};

// Redimensionnement d'image
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);

📝 Exemple : Image dans canvas

🎨 10. Create Gradients

// Dégradé linéaire
const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;

// Dégradé radial
const radialGrad = ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);

📝 Exemple : Dégradés

🎨 11. Styles and Colors

ctx.fillStyle = '#3498db';           // Couleur de remplissage
ctx.strokeStyle = '#e74c3c';         // Couleur du contour
ctx.lineWidth = 5;                   // Épaisseur du trait
ctx.lineCap = 'round';               // 'butt', 'round', 'square'
ctx.lineJoin = 'round';              // 'round', 'bevel', 'miter'
ctx.globalAlpha = 0.5;              // Transparence (0-1)

📝 Exemple : Styles variés

📝 12. Text and Fonts

ctx.font = 'bold 24px Arial';
ctx.fillStyle = '#2c3e66';
ctx.fillText('Texte rempli', 50, 60);
ctx.strokeText('Texte contour', 50, 100);
ctx.textAlign = 'center';  // left, center, right
ctx.textBaseline = 'middle'; // top, middle, bottom

📝 Exemple : Texte stylisé

✨ 13. Pattern and Shadow

// Ombre
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 4;
ctx.shadowColor = 'rgba(0,0,0,0.5)';

// Pattern
const pattern = ctx.createPattern(image, 'repeat');
ctx.fillStyle = pattern;

📝 Exemple : Ombre portée

💾 14. Save and Restore States

ctx.save();      // Sauvegarde l'état actuel
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
ctx.restore();   // Restaure l'état précédent
ctx.fillRect(70, 10, 50, 50); // Utilise la couleur précédente

📝 Exemple : Sauvegarde et restauration

🔄 15. Translation

ctx.translate(x, y);  // Déplace l'origine
ctx.rotate(angle);    // Rotation (radians)
ctx.scale(x, y);      // Change l'échelle
ctx.transform(a, b, c, d, e, f); // Transformation complète

📝 Exemple : Translation et rotation

🎬 16. Animation avec Canvas

function animate() {
    // Effacer le canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Dessiner à chaque frame
    x += vitesseX;
    y += vitesseY;
    ctx.fillRect(x, y, 50, 50);
    
    // Boucle d'animation
    requestAnimationFrame(animate);
}

animate();

📝 Exemple : Animation d'un carré

📝 Tableau récapitulatif des méthodes Canvas

Méthode/Propriété	Description
`fillRect()`	Dessine un rectangle plein
`strokeRect()`	Dessine le contour d'un rectangle
`clearRect()`	Efface une zone rectangulaire
`beginPath()`	Commence un nouveau chemin
`moveTo()`	Déplace le curseur
`lineTo()`	Trace une ligne
`arc()`	Dessine un arc/cercle
`bezierCurveTo()`	Courbe de Bézier cubique
`quadraticCurveTo()`	Courbe quadratique
`drawImage()`	Dessine une image
`createLinearGradient()`	Crée un dégradé linéaire
`createRadialGradient()`	Crée un dégradé radial
`fillText()`	Dessine du texte plein
`strokeText()`	Dessine du texte contour
`save()`	Sauvegarde l'état du canvas
`restore()`	Restaure l'état sauvegardé
`translate()`	Déplace l'origine
`rotate()`	Rotation
`scale()`	Change l'échelle
`requestAnimationFrame()`	Animation fluide

📌 Quiz de vérification

Question 1 : Comment obtenir le contexte 2D d'un canvas ?

✅ Réponse

const ctx = canvas.getContext('2d');

Question 2 : Quelle méthode permet de sauvegarder l'état du canvas ?

✅ Réponse

ctx.save()

Question 3 : Quelle méthode dessine un rectangle plein ?

✅ Réponse

ctx.fillRect(x, y, width, height)

Question 4 : Comment créer une animation fluide avec Canvas ?

✅ Réponse

requestAnimationFrame() – elle synchronise l'animation avec le rafraîchissement de l'écran (généralement 60fps).