Méthodologie de création d’un canvas en plein écran : pas à pas
1/ Création du canvas : le fichier HTML
Dans un premier temps il suffit de créer un fichier HTML5 basique puis on ajoute une balise canvas qui nous servira de point de départ.
<canvas id="canvas"></canvas>
2/ Canvas en plein écran : création du fichier CSS
Ensuite dans un second temps, il faut créer un fichier css associé au premier fichier HTML. Dans ce fichier on va alors y mettre :
body, html
{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
canvas
{
vertical-align: middle;
}
Ce qui signifie que nous allons supprimer toutes marges intérieures ou extérieures pour les balises body et html. Ce petit bout de CSS sert en fait de reset CSS.
Ensuite on leur indique qu’ils doivent tout deux prendre toute la hauteur et la largeur de l’écran.
Pour terminer la règle vertical-align: middle sert à supprimer les scrollbars pouvant nous embêter dans l’utilisation de notre canvas. Canvas étant une balise de type inline, elle comporte un espace de baseline en dessous d’elle même.
3/ Création du fichier JS
Pour finir, il faut créer un fichier Javascript pour générer le canvas dans la page HTML.
var canv = document.getElementById("canvas"); // Variable canv du canvas
var ctx = canv.getContext("2d"); // Contexte pour pouvoir dessiner dessus.
canv.width = window.innerWidth; // Il va prendre toute la largeur de la fenêtre.
canv.height = window.innerHeight; // Il va prendre toute la hauteur de la fenêtre.
4/ Votre canvas plein écran est prêt
Voilà vous avez donc à votre disposition un canvas prêt à être utilisé sur toute votre page HTML. Et donc des jeux avec qui prendront tout l’écran : Autant sur mobile que desktop.
Références :
https://medium.freecodecamp.org/how-creating-simple-canvas-games-helped-me-6eef839f450e
https://www.oodlestechnologies.com/blogs/Dynamic-Canvas-in-Cordova-or-Phonegap
https://darchevillepatrick.info/canvas/canvas_menu.htm
https://www.toptal.com/web/making-html5-canvas-based-game-with-angularjs-and-createjs
AndroLogiciels 