NSI, JS et HTML, ARdoise Magique

On considère les fichiers html et js suivants :

<!DOCTYPE html>
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dessiner et programmer avec canvas_V1</title>
<script src="./Dessiner et programmer avec canvas_V1_files/index.js"></script>
</head>
<body onload="draw()">
<canvas id="tutoriel" width="400" height="400"></canvas>
</body></html>
// on appelle la fonction draw lorsque la page est bien chargée dans le HTML
// par onload="draw()" comme propriété de l'élément
// body
function draw() {
  // on déclare un élément canvas qui correspond à l'élément dont l'id est tutoriel
   var canvas = document.getElementById("tutoriel");
   // on déclare notre feuille de dessin ctx qui sera une version 2D du canvas
   var ctx = canvas.getContext("2d");
   // on utilise une variable boléenne pour indiquer si le crayon est levé ou non
   var dessiner=false;
// on installe 2 détecteurs d'événements sur l'élément canvas
    // premier détecteur pour savoir si on abaisse
// la souris sur le canvas ( équivalent de clic)
 canvas.addEventListener("mousedown", on_abaisse_le_stylo, false);
    // second détecteur pour savoir si on bouge
    // la souris sur le canvas
 canvas.addEventListener("mousemove", dessiner_avec_la_souris, false);


 // si l'evenement mousedown est détecté, on abaisse ou on releve le stylo
 function on_abaisse_le_stylo(){
     // si dessiner est à vrai, on le passe à faux
     // sinon il est à faux et on le passe à vrai
   if (dessiner==true){dessiner=false;}else{dessiner=true;}

     }

 // si la souris est en mouvement
 function dessiner_avec_la_souris(evt){
   // on dessine si le stylo est baissé
   if (dessiner==true){
    // on recherche la position de la souris
    // par rapport au canvas
   var mousePos = getMousePos(canvas, evt);
    // on dessine le cercle à la position de la souris
   ctx.beginPath();
    ctx.fillStyle="black";
    ctx.arc(mousePos.x, mousePos.y, 15, 0, 2*Math.PI);
    ctx.fill();
       ctx.closePath();
  }
}

// fonction qui détermine la position de la souris par rapport à la page et
// par rapport à la position du canvas dans la page
// x et y sont alors les coordonnées de la souris par rapport à l'espace du canvas
// evt fait référence à l'événement position de la
// souris donc à la souris
function getMousePos(canvas, evt) {
    // on récupère les coordonnées du canvas
    // par rapport à la page
         var rect = canvas.getBoundingClientRect();
    // on calcule les coordonnées de la souris
    // dans le canvas
    // on retourne les valeurs trouvées
         return {
           x: evt.clientX - rect.left,
           y: evt.clientY - rect.top
         };
       }
}

Exercice 1

Ressource : https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/button

Modifier le HTML et le JS pour :
1. Agrandir l’espace de dessin,
2. Mettre un texte avant et après le canvas indiquant à l’utilisateur la marche à suivre,
3. Changer la couleur du crayon,
4. Modifier la taille du crayon.

Exercice 2

Ajouter un bouton permettant d’effacer l’espace de dessin et un autre permettant de choisir la couleur du crayon.

Proposition de correction :

<!DOCTYPE html>
<!-- saved from url=(0043)https://labodemaths.fr/ISN/Ardoise_magique/ -->
<html lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>Dessiner et programmer avec canvas_V1</title>
<script src="./Dessiner et programmer avec canvas_V1_files/index.js"></script>
</head>
<body onload="draw()">
<h1>Mon ardoise</h1>
<canvas id="tutoriel" width="800" height="400"></canvas>
<h2>Cliquer pour dessiner</h2>
 <input type="color" aria-label="Sélectionner la couleur du crayon">
 <input type="button" value="Effacer">
</body></html>

// on appelle la fonction draw lorsque la page est bien chargée dans le HTML
// par onload="draw()" comme propriété de l'élément
// body
function draw() {
  // on déclare un élément canvas qui correspond à l'élément dont l'id est tutoriel
   var canvas = document.getElementById("tutoriel");
   // on définit la largeur et la hauteur du canvas
   var width = canvas.width
   var height = canvas.height 
   // on déclare notre feuille de dessin ctx qui sera une version 2D du canvas
   var ctx = canvas.getContext("2d");
   // on recupère nos boutons
   var bouton_effacer = document.querySelector('input[type="button"]');
   var bouton_couleur = document.querySelector('input[type="color"]');
   // on utilise une variable boléenne pour indiquer si le crayon est levé ou non
   var dessiner=false;
// on installe 2 détecteurs d'événements sur l'élément canvas
    // premier détecteur pour savoir si on abaisse
// la souris sur le canvas ( équivalent de clic)
 canvas.addEventListener("mousedown", on_abaisse_le_stylo, false);
    // second détecteur pour savoir si on bouge
    // la souris sur le canvas
 canvas.addEventListener("mousemove", dessiner_avec_la_souris, false);

bouton_effacer.onclick = function() {
  ctx.fillStyle = 'rgb(255,255,255)';
  ctx.fillRect(0,0,width,height);
}
 // si l'evenement mousedown est détecté, on abaisse ou on releve le stylo
 function on_abaisse_le_stylo(){
     // si dessiner est à vrai, on le passe à faux
     // sinon il est à faux et on le passe à vrai
   if (dessiner==true){dessiner=false;}else{dessiner=true;}

     }

 // si la souris est en mouvement
 function dessiner_avec_la_souris(evt){
   // on dessine si le stylo est baissé
   if (dessiner==true){
    // on recherche la position de la souris
    // par rapport au canvas
   var mousePos = getMousePos(canvas, evt);
    // on dessine le cercle à la position de la souris
   ctx.beginPath();
    ctx.fillStyle=bouton_couleur.value;
    ctx.arc(mousePos.x, mousePos.y, 5, 0, 2*Math.PI);
    ctx.fill();
       ctx.closePath();
  }
}

// fonction qui détermine la position de la souris par rapport à la page et
// par rapport à la position du canvas dans la page
// x et y sont alors les coordonnées de la souris par rapport à l'espace du canvas
// evt fait référence à l'événement position de la
// souris donc à la souris
function getMousePos(canvas, evt) {
    // on récupère les coordonnées du canvas
    // par rapport à la page
         var rect = canvas.getBoundingClientRect();
    // on calcule les coordonnées de la souris
    // dans le canvas
    // on retourne les valeurs trouvées
         return {
           x: evt.clientX - rect.left,
           y: evt.clientY - rect.top
         };
       }
}