# TP : Canvas ## Mise en place Rendez-vous sur : Une fois sur la page, commencez par vous connecter avec votre compte Github. Cette étape est optionnelle, mais vous assurera de ne pas perdre votre travail. Une fois connecté, vous pouvez modifiez les fichiers. Lorsque vous sauvegarderez (CTRL+S), un message apparaîtra en bas à gauche, vous indiquant que la sandbox a été forkée. Noté que l'URL de la page a changé. **C'est cette URL que je vous demanderai de me fournir pour rendre ce TP.** ![](https://657091054-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnswsZS6eUIgREjnzKE%2F-LvHrWUED3mMSpsdkPYn%2F-LvHrysoMvqTjrpYifa1%2Fimage.png?alt=media\&token=4bfd8d27-533a-4b77-95cf-66867fdf5796) ## Exercice 1 ***Envoyez-moi par e-mail le lien de votre fork avant de commencer cet exercice.*** Dans le fichier `index.html`, ajoutez un canvas de **580px** par **400px.** A l'aide de JavaScript, essayez de reproduire au mieux la scène suivante (*n'importez pas une image* 😎) : ![](https://657091054-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnswsZS6eUIgREjnzKE%2F-LvHrWUED3mMSpsdkPYn%2F-LvHs0mO9hIzcYryOf-P%2Fimage.png?alt=media\&token=d8b45f44-fe6f-4cd3-bcaa-2a86ba52f4a9) ## Exercice 2 Créez un deuxième canvas, de la taille de votre choix. Le but de cet exercice est de rendre plus interactif l'utilisation des canvas dans le navigateur, et de persister un dessin fait dans ce dernier. ### Dessinez en cliquant Récupérez les coordonnées du curseur lors d'un clic dans le canvas. Dessinez un cercle à cette position (rayon et couleur aléatoire). ### Sauvegardez le dessin Une fois le cercle dessiné, enregistrez sa position et ses paramètres (rayon et couleur) dans le navigateur. A cette étape, un rafraîchissement de la page videra le canvas, mais les données devront être stockées. ### Chargez le dessin Récupérez les données préalablement stockées pour affichez les cercles stockées. A cette étape, un rafraîchissement de la page déclenchera le chargement et l'affichage des cercles stockées. ### Réinitialisez le dessin Ajoutez un bouton qui permettra de réinitialiser le dessin. Un clic sur ce bouton effacera le contenu du canvas. ### BONUS : Gérez plusieurs dessins ! Ajoutez les éléments nécessaires à la gestion de plusieurs dessins. Par exemple : * Une zone pour saisir le nom d'un dessin * Un bouton pour enregistrer un dessin * Une liste de tous les dessins * ... ## Exercice 3 ### Afficher le damier L'objectif est d'afficher un damier de 10 cases par 10, similaire à celui-ci : ![](https://657091054-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnswsZS6eUIgREjnzKE%2F-LvHrWUED3mMSpsdkPYn%2F-LvHs4dYF6cSI7ZDo_UE%2Fimage.png?alt=media\&token=d5068a1a-da5b-4137-a807-3dd70f5d25bc) Commencez par créer un fichier `ex3.js`, et incluez-le dans votre `index.html`. Créez également un canvas carré, dans la longueur des côtés sera divisible par 10 (ex: 500\*500px). ### Le point rouge se déplace Sur ce damier, un cercle rouge se déplacera de "5px" lors de l'appuie sur les flèches du clavier (dans la direction de la flèche. ### Le point rouge change de taille L'appuie sur le bouton (+) augmentera la taille du cercle de 1px, alors qu'un appuie sur le bouton (-) diminuera la taille du cercle de 1px. ### Le point rouge ne pourra pas quitter le canvas Faites les modifications nécessaires pour empêcher le cercle rouge de sortir du canvas. ### BONUS : Le cercle Cyan Ajoutez un cercle cyan, qui sera dirigé par les touches q,z,d,s. Veillez à ce que les deux cercles ne se superposent jamais. Les touches (+) et (-) agissent sur les deux cercles. ## Corrections {% embed url="" %} {% embed url="" %} {% embed url="" %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://students.corentindesfarges.fr/lp-tais/tp-canvas.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.