JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width=200 height=200 />

JavaScript

var ctx = document.getElementById("canvas").getContext("2d");

// Dessiner une simple ligne
ctx.lineWidth 	= 20; 			// Epaisseur des formes
ctx.strokeStyle = "red"; 	// Couleur du contour
ctx.fillStyle 	= "rgba(50, 230, 100, 0.5)"; 	// Couleur du contenu

// On démarre un nouveau chemin
ctx.beginPath();
  ctx.moveTo(0, 0);	// On déplace le curseur à la position x à 0 et y à 0
  ctx.lineTo(150, 0); 	// On dessine une ligne qui part du curseur jusqu'à la position x à 10 et y à 0
  ctx.stroke(); 	// On dessine le contour du chemin que nous avons créé (ici, une ligne)
ctx.closePath();

// Dessiner un rectangle
ctx.strokeRect(50, 50, 100, 100) 	// on dessine un rectangle partant de la position x à 50 et y à 50, d'une largeur de 100px et une hauteur de 100px

ctx.lineWidth = 2;
ctx.beginPath();
	ctx.rect(20, 20, 150, 150);
  ctx.fill();
  ctx.stroke();
ctx.closePath();