Creative Coding

Creative
Coding

Canvas

2025 - 2026

Inspirations

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 ];
};

Template Canvas

Exercices

1/7

1/1