Data Coding

Canvas

2025 - 2026

Fetch API

Définition

Fetch API permet de faire des requêtes HTTP dans le but de recevoir des données, sur un modèle de promesse - réponse.

Fetch API Promise

Mise en place


											const loadData = ( url ) => {
    const responce = await fetch( url, options );
    const values = await response.json();
    return values;
};

La requête peut prendre différents formats, tout comme une requête HTTP.

Fetch options

PokeAPI

Essayons de récupérer les 151 premiers pokemons via le pokeAPI. La finalité sera de croiser les types et le poids des différents pokemons et d'en réaliser un visuel.

Certaines API ont une interface permettant de tester les requêtes et d'avoir une idée du schéma de données.

PokeAPI PokeAPI Documentation

Inception

On retrouve souvent avec une mise en abyme dans le schéma de données des API. Cela veut dire qu'au lieu d'avoir des données utilisables, on se retrouve avec une nouvelle url pour faire une requête.

La fonction que nous avons mise en place va nous permettre de facilement faire une boucle à l'intérieur de notre première requête afin de récuperer les données dont nous avons besoin.

Changer de requête

Dans nos données on nous renvoit pokemon species, qui ne contient pas les informations nécessaire. En regardant dans la documentation on peut voir qu'il existe une requête dédié aux fiches pokémons, qui demande un id ou un nom:

Pokemon endpoint

Simplifier les données

Vu le nombre d'éléments (151) et la longueur des données, il serait bon de créer notre propre tableaux avec uniquement les données qui nous intéressent: name, types, weight.

Enregistrer nos données

Maintenant que nous avons les données nécessaires et pour éviter de devoir faire un appel à chaque fois que l'on relance notre page, nous pouvons faire un clique droit pour copier les données sous forme d'objet via la console.

pokemons data

Canvas 101

L'élément canvas permet de manipuler des pixels dans notre HTML.

Setup

Première chose à faire: définir notre canvas.


																							
													

												
																							
													// Soit on récupère une balise canvas existante
const canvas = document.querySelector( ".myCanvas" );

// Soit on le crée
const body = document.querySelector( "body" );
const canvas = document.createElement( "canvas" );
body.append( canvas );

Query Selector Create element Append Child

Les dimensions

Par défaut, un canvas a une largeur de 300px et une hauteur 150px. On utilise les propriétés width et height de notre canvas pour changer sa taille.


											// On change la largeur et la hauteur.
// Inutile de préciser une unité,
// un canvas interprète les valeurs en pixels.
canvas.width = 500;
canvas.height = 500;

Canvas.width canvas.height

client width client height

Le contexte

Pour pouvoir dessiner quelque chose dans notre canvas, il nous faut une dernière chose: le contexte. Ce dernier est une boîte à outils, qui contiendra nos méthodes, il en existe 2:

2d
webgl2 (3d)


												const canvas = document.querySelector( ".myCanvas" );

  // Charge nos méthodes dans une
  // constante "ctx", qui pourra être utilisé
  // pour dessiner en 2d.
  const ctx = canvas.getContext( "2d" );

Get Context Context 2d

Formes &
densité

Rectangles


											// 👻 Crée un rectangle sans remplissage, sans contour
ctx.rect( x, y, width, height );

// Dessine et rempli
ctx.fillRect( x, y, width, height );

// Dessine et rajoute un contour
ctx.strokeRect( x, y, width, height );

x: La position horizontale du coin supérieur gauche
y: La position verticale du coin supérieur gauche
width: La largeur du rectangle
height: La hauteur du rectangle

ctx.rect ctx.fillRect ctx.fillstroke ctx.fill ctx.stroke ctx.beginpath ctx.closepath

Densité de pixel

Device Pixel Ratio (ou DPR)

Si votre écran à une densité de pixel plus grande que 1 ( mac, smartphones, ect.), ce que nous avons dessiné est flou, surtout sur les contours.

Il faut voir le canvas comme une balise image: elle est composée de pixels. Et comme une image, si on veut qu'elle soit nette, il faut que sa résolution reflète le nombre de pixel dessiné, multiplié par la densité de pixel de votre écran.

Ex: Sur un écran de DPR 2, un canvas de 200px doit avoir une résolution de 400px pour être net.

Device Pixel Ratio ctx.scale

Cercles…


												// Dessine un cercle
  ctx.arc( x, y, radius, startAngle, endAngle, counterclockwise = false );

x: La position horizontale du centre
y: La position verticale du centre
radius: Le rayon du cercle
startAngle: L'angle de début (en radian)
endAngle: L'angle de fin (en radian)
counterclockwise: La direction de l'arc de cercle (false par défaut)

Degré vs Radian


											//-- Un tour de cercle
// deg = 360 ou rad = 2 * Math.PI

//-- Un quart de cercle
// deg = 90 ou rad = 0.5 * Math.PI

// Fonction pour convertir des radians en degrés
const radToDeg = ( rad ) => {
  return rad * ( 180 / Math.PI );
}

// Fonction pour convertir des degrés en radians
const degToRad = ( deg ) => {
  return deg * ( Math.PI / 180 );
}

ctx.arc Math.PI

Les styles

ctx.save ctx.restore ctx.lineWidth ctx.fillstyle ctx.strokestyle Autres styles

Toolbox

Nombre aléatoire mk.II


											const rand = ( max = 1, min = 0, { round = false } = {} ) => {
  let n = Math.random() * ( max - min ) + min;
  if( round ){
    return Math.round( n );
  }
  return n;
};

max est le nombre maximum que vous voulez obtenir ( par défaut 1 )
min est le nombre minimum que vous voulez obtenir ( par défaut 0 )
{...} = {} est objet contenant des options
round est un boolean, s'il est true, alors le nombre sera arrondi (par défaut false)

Accéder à un élément aléatoire d'un tableau


											const getRandomElement = ( array ) => {
  const randomIndex = Math.floor( Math.random() * array.length );
  return array[ randomIndex ];
};