Dans un monde où la création graphique et la visualisation de données prennent une place essentielle dans la communication digitale, maîtriser Canvas et ses outils devient un atout majeur. Cette formation vous permet de développer des compétences clés en dessin vectoriel, création de graphiques dynamiques et manipulation des éléments visuels directement dans le navigateur, avec des applications concrètes dans le design web, le développement de sites interactifs et la gestion de données visuelles. Grâce à l’apprentissage des courbes de Béziers, des dégradés et de la création de graphiques comme les camemberts, vous serez à même de répondre aux besoins des entreprises à la recherche de professionnels capables de réaliser des interfaces modernes et engageantes. Face à l'évolution rapide du marché du travail numérique et des responsabilités accrues dans les équipes de développement et de communication, cette formation vous offre des opportunités d'emploi dans des secteurs en pleine croissance, tout en vous préparant à anticiper les défis liés aux outils web et à la création visuelle interactive.

Public

À qui s'adresse la formation CANVAS (Débutant)

Cette formation s'adresse principalement aux personnes qui créent des sites internet et souhaitent inclure des éléments graphiques dynamisés par scripts (statistiques, animations, etc.). Les personnes concernés par cette formation sont généralement les webmasters et les développeurs front ou graphistes ayant la compétence programmation. La formation nécessite d'être à l'aise avec les compétences HTML, XHTML et CSS et de posséder un niveau perfectionnement en Javascript.

Objectifs

Compétences visées pour la formation CANVAS (Débutant)

La formation "CANVAS - Débutant" vise à doter les participants des compétences fondamentales pour maîtriser l'élément Canvas en HTML5. À travers l'exploration des différences entre SVG et Canvas, l'apprentissage de la création de formes simples et avancées, ainsi que la manipulation de JavaScript et jQuery, les stagiaires apprendront à créer et gérer des graphiques dynamiques et interactifs, tout en s'assurant de la compatibilité multi-navigateurs.

Programme

Différencier SVG et Canvas

  1. Fonctionnement du DOM et mode de rendu
  2. Différences entre objets vectoriels (SVG) et bitmap (Canvas)
  3. Avantages et limites de chaque technologie
  4. Gestion des événements et interactivité

Créer un élément Canvas dans une page HTML

  1. Structure d’un élément
  2. Intégration dans une page HTML5
  3. Paramétrage de la taille et de la zone de dessin
  4. Compatibilité navigateurs et bonnes pratiques

Tracer des formes géométriques simples

  1. Dessiner des lignes, rectangles, cercles
  2. Style de tracé : contour, remplissage, couleurs
  3. Gommage, effacement d’éléments
  4. Placement, translation et dimensions relatives

Afficher et styliser du texte sur le Canvas

  1. Méthodes fillText() et strokeText()
  2. Définir police, taille et alignement
  3. Insertion de textes dynamiques
  4. Couplage avec les données utilisateur

Créer des graphiques manuellement (barres, lignes)

  1. Tracé segmenté et axes personnalisés
  2. Choix des couleurs, épaisseurs et légendes
  3. Utilisation de boucles pour générer des données
  4. Réutilisation de fonctions pour modulariser

Utiliser le JavaScript pour automatiser les tracés

  1. Parcours et sélection d’éléments HTML
  2. Manipulation de tableaux et objets
  3. Événements utilisateurs : clics, survols
  4. Boucles et fonctions de traitement des données

Créer un camembert dynamique en Canvas

  1. Calcul des angles et rayons
  2. Utilisation des arcs et remplissage de secteurs
  3. Colorisation dynamique et génération aléatoire
  4. Affichage des légendes et valeurs

Dessiner des formes complexes

  1. Tracés courbes : Bézier et quadratiques
  2. Utiliser moveTo(), lineTo(), bezierCurveTo()
  3. Création de formes personnalisées
  4. Superposition et agencement des éléments

Créer des dégradés et effets visuels

  1. Dégradé linéaire : création et application
  2. Dégradé radial : syntaxe et positionnement
  3. Ombres, flous et effets de perspective
  4. Appliquer plusieurs effets combinés

Intégrer des images et les manipuler

  1. Charger des images externes dans Canvas
  2. Redimensionnement et placement
  3. Appliquer des filtres et effets
  4. Combiner image et dessin vectoriel

Ajouter de l’interactivité avec les événements

  1. Capter les clics, mouvements et survols
  2. Mise à jour du canvas en temps réel
  3. Création d’un dessin interactif simple
  4. Logique conditionnelle pour changer les tracés

Exporter les créations et gérer les formats

  1. Sauvegarder le rendu en image PNG
  2. Téléchargement automatique via JavaScript
  3. Export d’une portion du canvas
  4. Bonnes pratiques d’optimisation des fichiers

La formation CANVAS (Débutant) est dispensée sur 21 heures

Proche de chez vous

Formatrice : Marine GILHET

euro

Expérience graphiste/community manager/ social media manger depuis 2021 :

  • Formatrice depuis 2021
  • Formatrice dans les domaines de la communication digitale et du graphisme
  • Utilisation de Canva depuis 2017
  • Utilisation de Canva pour différents projets : Print, site internet, social media ...

Diplômes et certifications :

  • BTS design  obtenu en 2018
  • Formation de social media manager obtenu en 2021
Déroulé pédagogique

Règlement intérieur
Engagements PSH
Conditions Générales de Vente
Cette offre de formation est d'actualité au 29/08/2025

Durée et montant de la formation

Intitulé Durée Montant HT
Formation CANVAS - Débutant 21 heures 1790.00 €
Obtenir un devis

Demander une convention de formation

Inscription newsletter

Recevez la newsletter ONLYWEB Formation pour vous tenir informé des formations à venir et maintenir vos compétences.

ONLYWEB Formation, s'appuie sur le réseau d'experts EVA - Solutions

coordonnées

© ONLYWEB Formation
6 pl. Dumas de Loire
69009 Lyon
TÉL 09 72 13 00 73
EVA Solutions: La force du réseau

ONLYWEB Formation

ACCUEIL - RESSOURCES - PLANNING - MENTIONS LÉGALES - PARTENAIRES - CONTACT