HTML5 Canvas

John Samuel
CPE Lyon

Année: 2020-2021
Courriel: john(dot)samuel(at)cpe(dot)fr

Objectifs

Canvas
- Lignes, Arcs et Courbes
- Rectangle
- Texte
- Manipulation des images
- Interaction
SVG
- Lignes, Chemins, Arcs et Courbes
- Rectangle, Cercles et Ellipses
- Texte
Média

Histoire

Dévéloppé par Apple pour être utilisé dans WebKit en 2004
Adopté par les navigateurs utilisant Gecko en 2005
Adopté par Opera en 2006
Standardisé par le groupe de travail WHATWG
Il n'est pas reconnu par tous les vieux navigateurs

canvas


                          <body>
...

                           <canvas id="moncanvas" width="300" height="400">

                           </canvas>
                          
...

                          </body>

canvas

<canvas> utilise un objet de contexte JavaScript
La taille par défaut de canvas est 300 px × 150 px


                           <canvas id="moncanvas" width="300" height="400">

                           </canvas>

canvas


                           <canvas id="moncanvas" width="300" height="400">

                           </canvas>

(0, 0): le coin supérieur gauche
(300, 400): le coin inférieur droit

getContext(...)


                          <body>
...

                           <canvas id="moncanvas" width="300" height="400">

                           </canvas>
                          

                           <script>

                            var id = document.getElementById("moncanvas");

                            var context = id.getContext("2d");

                           </script>
...

                          </body>

canvas

Dans le body d'un fichier HTML

identifiant: id
largeur: width
hauteur: height


                           <canvas id="moncanvas" width="300" height="400">

                           </canvas>

canvas

Dans un fichier Javascript ou dans <script>...</script>


                           <script>

                            var id = document.getElementById("moncanvas");

                            var context = id.getContext("2d");

                           </script>

style.backgroundColor

Changer la couleur du fond


                            id.style.backgroundColor = "green";

width, height

Changer l'hauteur et la largeur d'un canvas


                            var id = document.getElementById("moncanvas");

                            id.setAttribute("width", 500);

                            id.setAttribute("height", 600);

3D en utilisant le contexte WebGL


                          <body>
...

                           <canvas id="moncanvas3D" width="300" height="400">

                           </canvas>
                          

                           <script>

                            var id = document.getElementById("moncanvas3D");

                            var context = id.getContext("webgl");

                           </script>
...

                          </body>

lineTo(...)


                          <body>
...

                           <canvas id="ligne" width="300" height="400">

                           </canvas>
                          

                           <script>

                            var id = document.getElementById("ligne");

                            var context = id.getContext("2d");


                            context.strokeStyle =  "#00b33c";

                            context.lineWidth = 10;

                            context.moveTo(0,0);

                            context.lineTo(300,400);

                            context.stroke();

                           </script>
...

                          </body>

lineTo(...)


                           <canvas id="ligne" width="300" height="400">

                           </canvas>
                          

                           <script>

                            var id = document.getElementById("ligne");

                            var context = id.getContext("2d");


                            context.strokeStyle =  "#00b33c";

                            context.lineWidth = 10;

                            context.moveTo(0,0);

                            context.lineTo(300,400);

                           </script>
...

lineTo(...)


                          <body>
...

                           <canvas id="ligne" width="300" height="400">

                           </canvas>
                          

                           <script>

                            var id = document.getElementById("ligne");

                            var context = id.getContext("2d");


                            context.strokeStyle =  "#00b33c";

                            context.lineWidth = 10;

                            context.moveTo(300,0);

                            context.lineTo(0,400);

                            context.stroke();

                           </script>
...

                          </body>

beginPath()


                            context.beginPath();

                            context.strokeStyle =  "#00b33c";

                            context.moveTo(0,0);

                            context.lineTo(300,400);

                            context.stroke();

beginPath()


                            context.beginPath();

                            context.strokeStyle =  "#00b33c";

                            context.moveTo(0,0);

                            context.lineTo(300,400);


                            context.strokeStyle =  "red";

                            context.moveTo(0,400);

                            context.lineTo(300,0);

                            context.stroke();

beginPath()


                            context.beginPath();

                            context.strokeStyle =  "#00b33c";

                            context.moveTo(0,0);

                            context.lineTo(300,400);

                            context.stroke();


                            context.beginPath();

                            context.strokeStyle =  "red";

                            context.moveTo(0,400);

                            context.lineTo(300,0);

                            context.stroke();

arc(...)


                            context.beginPath();

                            context.arc(200, 150, 100, Math.PI, 1.5 * Math.PI);

                            context.stroke();

arc(...)


                            context.beginPath();

                            context.arc(200, 150, 100, Math.PI, 1.5 * Math.PI, true);

                            context.stroke();

arc(...)


                            context.beginPath();

                            context.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);

                            context.stroke();

Note: Les angles dans la fonction arc sont mesurés en radians.

sans moveTo()


                            context.beginPath();

                            context.strokeStyle =  "#00b33c";

                            context.moveTo(0,0);

			    context.lineTo(250,400);



                            context.arc(100,150, 50, 0, 2*Math.PI);

                            context.stroke();

avec moveTo()


                            context.beginPath();

                            context.strokeStyle =  "#00b33c";

                            context.moveTo(0,0);

			    context.lineTo(250,400);



                            context.moveTo(150,150);

                            context.arc(100,150, 50, 0, 2*Math.PI);

                            context.stroke();

arcTo(...)


                            context.beginPath();

                            context.moveTo(0,70);

                            context.lineTo(140,70);

                            context.arcTo(200, 70, 200, 270, 50);

                            context.lineTo(200, 270);

                            context.stroke();

arcTo(...)


                            context.beginPath();

                            context.fillStyle =  "#00b33c";

                            context.moveTo(0,70);

                            context.lineTo(140,70);

                            context.arcTo(200, 70, 200, 270, 50);

                            context.lineTo(200, 270);

                            context.fill();

arcTo(...)


                            context.beginPath();

                            context.arcTo(x1, y1, x2, y2, rayon);

                            context.stroke();

Exemple


                            context.arcTo(350, y, 710, 20, 150);

Courbe de Bézier quadratique

quadraticCurveTo(...)


                            context.beginPath();

                            quadraticCurveTo(cp1x, cp1y, x, y);

                            context.stroke();

quadraticCurveTo(...)


                            context.beginPath();

                            context.moveTo(0,70);

                            context.lineTo(120,70);

                            context.quadraticCurveTo(280, 120, 200, 270);

                            context.stroke();

Courbe de Bézier quadratique

quadraticCurveTo(...)


                            context.beginPath();

                            quadraticCurveTo(cp1x, cp1y, x, y);

                            context.stroke();

Courbe de Bézier cubique

bezierCurveTo(...)


                            context.beginPath();

                            bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

                            context.stroke();

bezierCurveTo(...)


                            context.beginPath();

                            context.moveTo(0,70);

                            context.lineTo(120,70);

                            context.bezierCurveTo(280, 120, 240, 220, 150, 270);

                            context.stroke();

Courbe de Bézier cubique

bezierCurveTo(...)


                            context.beginPath();

                            bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

                            context.stroke();

Cercle en utilisant arc(...)


                            context.beginPath();

                            context.arc(150, 150, 100, 0, 2 * Math.PI);

                            context.stroke();

ellipse(...)


                            context.beginPath();

                            context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);

                            context.stroke();

ellipse(...)


                            context.beginPath();

                            context.ellipse(150, 180, 100, 150, Math.PI/4, 0, 2 * Math.PI);

                            context.stroke();

Path2D(...)

Il vous permet de mettre en cache ou d'enregistrer ces commandes de dessin.
Il vous aide également à reproduire rapidement les chemins.

1. Crée un objet chemin vide


                            Path2D();

2. Copie d'un autre objet Path2D


                            Path2D(chemin);

3. Crée le chemin à partir des données de chemin SVG


                            Path2D(cheminsvg);

Path2D(...)


                            var id = document.getElementById("moncanvas");

                            var context = id.getContext("2d");

                            var cercle = new Path2D();

                            cercle.arc(150, 150, 100, 0, 2 * Math.PI);

                            context.stroke(cercle);

Path2D(...)


                            var id = document.getElementById("moncanvas");

                            var context = id.getContext("2d");

                            var cercle = new Path2D();

                            cercle.arc(150, 150, 100, 0, 2 * Math.PI);

                            context.fillStyle =  "#00b33c";

                            context.fill(cercle);

rect(...)


                            context.lineWidth = 10;

                            context.rect(10, 10, 280, 280);

                            context.stroke();

rect(...)


                            context.strokeStyle =  "#00b33c";

                            context.rect(x, y, largeur, hauteur);

                            context.stroke();



                            context.strokeStyle =  "#00b33c";

                            context.strokeRect(x, y, largeur, hauteur);



                            context.fillStyle =  "#00b33c";

                            context.fillRect(x, y, largeur, hauteur);

fillRect(...)


                            context.fillStyle =  "#00b33c";

                            context.fillRect(10, 10, 280, 280);

fillStyle


                            context.fillStyle =  "green";

                            context.fillRect(10, 10, 140,140);

                            context.fillStyle =  "#00b33c";

                            context.fillRect(150, 10, 140,140);

                            context.fillStyle =  "rgb(100,255,100)";

                            context.fillRect(10, 150, 140, 140);

                            context.fillStyle =  "rgba(100,255,100,0.4)";

                            context.fillRect(150, 150, 140, 140);

fillStyle


                            context.fillStyle =  "red";

                            context.arc(150, 150, 100, 0, 2 * Math.PI);

                            context.fill();

                            context.fillStyle =  "rgba(100,255,100,1)";

                            context.fillRect(10, 10, 140,140);

                            context.fillStyle =  "rgba(100,255,100,0.7)";

                            context.fillRect(150, 10, 140,140);

                            context.fillStyle =  "rgba(100,255,100,0.5)";

                            context.fillRect(10, 150, 140, 140);

                            context.fillStyle =  "rgba(100,255,100,0.3)";

                            context.fillRect(150, 150, 140, 140);

fillStyle


			  var lingradient = context.createLinearGradient(10, 10, 10, 340);

                            lingradient.addColorStop(0, "blue");

                            lingradient.addColorStop(0.5, "#ff0000");

                            lingradient.addColorStop(1, "#ffffff");

			    context.fillStyle = radialgradient; 

                            context.fillRect(10, 10, 240,340);

fillStyle


			  var radialgradient = context.createRadialGradient(140, 140, 10, 140, 140, 100);

                            radialgradient.addColorStop(0, "blue");

                            radialgradient.addColorStop(0.5, "green");

                            radialgradient.addColorStop(1, "#ffffff");

			    context.fillStyle = radialgradient; 

                            context.fillRect(10, 10, 240,340);

Polygone en utilisant lineTo()


                            context.beginPath();

                            context.strokeStyle =  "#00b33c";

                            context.moveTo(10, 10);

                            context.lineTo(150, 380);

                            context.lineTo(280, 10);

                            context.closePath();

                            context.stroke();

Polygone en utilisant lineTo()


                            context.beginPath();

                            context.fillStyle =  "#00b33c";

                            context.moveTo(10, 10);

                            context.lineTo(150, 380);

                            context.lineTo(280, 10);

                            context.closePath();

                            context.fill();

Polygone en utilisant lineTo()


                            context.beginPath();

                            context.strokeStyle =  "#00b33c";

                            context.moveTo(10, 200);

                            context.lineTo(80, 10);

                            context.lineTo(200, 10);

                            context.lineTo(270, 200);

                            context.lineTo(200, 380);

                            context.lineTo(80, 380);

                            context.closePath();

                            context.stroke();

Polygone en utilisant lineTo()


                            context.beginPath();

                            context.fillStyle =  "#00b33c";

                            context.moveTo(10, 200);

                            context.lineTo(80, 10);

                            context.lineTo(200, 10);

                            context.lineTo(270, 200);

                            context.lineTo(200, 380);

                            context.lineTo(80, 380);

                            context.lineTo(80, 380);

                            context.closePath();

                            context.fill();

clearRect()


                            context.clearRect(90, 140, 100, 100);

strokeText()


                            context.font =  "40px Arial";

                            context.strokeText("Bonjour!", 100, 100);

fillText()


                            context.font =  "40px Arial";

                            context.fillText("Bonjour!", 100, 100);

strokeText()


                            context.font =  "40px Arial";

                            context.strokeText("Bonjour!", 100, 100);

textAlign()


                context.font = "30px Arial";

                context.textAlign = "start";

                context.fillText("début", 250, 20);

                

                context.textAlign = "end";

                context.fillText("fin1 fin2 fin3 fin4 fin5 fin6", 250, 100);

                

                context.textAlign = "left";

                context.fillText("gauche1 gauche2 gauche3 gauche4", 250, 180);

                

                context.textAlign = "right";

                context.fillText("droite1 droite2 droite3 droite4", 250, 260);

                

                context.textAlign = "center";

                context.fillText("centre", 250, 340);

textBaseline()


                              context.font = "20px Arial";

                              context.textBaseline = "top";

                              context.fillText("haut", 0, 200);

                            

                              context.textBaseline = "middle";

                              context.fillText("moyen", 150, 200);

                            

                              context.textBaseline = "alphabetic";

                              context.fillText("alphabetique", 250, 200);

                            

                              context.textBaseline = "bottom";

                              context.fillText("en bas", 420, 200);

drawImage()


                          context.drawImage(image, dx, dy);

                          context.drawImage(image, dx, dy, dLargeur, dHauteur);

                          context.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);

drawImage()


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.drawImage(img, 0, 0);

                          }

drawImage()


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.drawImage(img, 0, 0, 500, 400);

                          }

drawImage(...)


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.drawImage(img, 0, 0, 250, 200);

                            context.drawImage(img, 250, 0, 250, 200);

                            context.drawImage(img, 0, 200, 250, 200);

                            context.drawImage(img, 250, 200, 250, 200);

                          }

drawImage(...)


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.drawImage(img, 100, 100, 500, 400, 250, 250, 150, 150);

                          }

rotate(...)


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.rotate(10*Math.PI/180);

                            context.drawImage(img, 200, 0, 200, 200);

                          }

scale(...)


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.scale(0.5, 0.5);

                            context.drawImage(img, 200, 0, 200, 200);

                          }

translate(...)


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.drawImage(img, 0, 0, 200, 200);

                            context.translate(200, 200);

                            context.drawImage(img, 0, 0, 400, 400);

                          }

transform(...)


                           var img = new Image();

                           img.src = "img.png";

                           img.onload = function() {

                            context.drawImage(img, 0, 0, 200, 200);

                            context.transform(0.5, 0.5, -0.5, 0.5, 300,10);

                            context.drawImage(img, 0, 0, 400, 400);

                          }

keyCode


		 document.onkeydown = function(event) {

		  event = event || window.event;

		  event.preventDefault();



		  if (event.keyCode == '37') {

		   // gauche

                  }

		  else if (event.keyCode == '38') {

		   // haut

                  }

		  else if (event.keyCode == '39') {

		   // droite

                  }

		  else if (event.keyCode == '40') {

		   // bas

                  }

                 }

key


		 document.onkeydown = function(event) {

		  event = event || window.event;

		  event.preventDefault();



		  if (event.key === "ArrowLeft") {

		   // gauche

                  }

		  else if (event.key === "ArrowUp") {

		   // haut

                  }

		  else if (event.key === "ArrowRight") {

		   // droite

                  }

		  else if (event.key === "ArrowDown") {

		   // bas

                  }

                 }

pageX, pageY, offsetLeft, offsetTop


                     document.getElementById("moncanvas").onmousedown  = function(event) {

                      event = event || window.event;

                      event.preventDefault();

                        

                      var posX = event.pageX - canvas.offsetLeft;

                      var posY = event.pageY - canvas.offsetTop;

                   }

pageX, pageY, offsetLeft, offsetTop


                     document.getElementById("moncanvas").onmousedown  = function(event) {

                      event = event || window.event;

                      event.preventDefault();

                        

                      var posX = event.clientX - canvas.getBoundingClientRect().x;

                      var posY = event.clientY - canvas.getBoundingClientRect().y;

                   }

onmouseup


		    document.body.onmouseup = function(event) {

	              event = event || window.event;

	              event.preventDefault();

                    }

Canvas et SVG

SVG	Canvas
Pour les images vectorielles	Pour les images matricielles
XML	Javascript
Manipulation facile des événements du DOM	Correspondence des coordonnées du pointeur et d'image

svg

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                  ...
                  </svg>

rect

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <rect height=200 width=200 fill="green">
                  </svg>

circle

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <circle cx=100 cy=100 r=50 fill="red">
                  </svg>

ellipse

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <ellipse cx=100 cy=100 rx=80 ry=40 fill="red">
                  </svg>

line

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <line x1=0 y1=0 x2=200 y2=200 stroke="red" stroke-width=10>
                  </svg>

polyline

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <polyline points="30 30 180 180 30 180"
                       fill="none"
                       stroke="red" stroke-width=10 />
                  </svg>

polygon

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <polygon points="30 30 180 180 30 180"
                       fill="none"
                       stroke="red" stroke-width=10 />
                  </svg>

path

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <path d="M30 30 L 180 180 L 30 180"
                       fill="none"
                       stroke="red" stroke-width=10 />
                  </svg>

path

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <path d="M30 30 L 180 180 L 30 180"
                       fill="none"
                       stroke="red" stroke-width=10 />
                  </svg>

M: Move to
L: Line to
H: Horizontal line to
V: Vertical line to

text

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <text x="40" y="40"
                           stroke="red" fill="red">
                           Bonjour</text>
                  </svg>

textPath

                  <svg width="200" height="200"
                     xmlns="http://www.w3.org/2000/svg">
                     <path d="M30 30 L 180 180 L 30 180"
                       fill="transparent"
                       id="tpath"
                       stroke-width=10 />
                     <text stroke="red" fill="red">
                       <textPath xmlns:xlink="http://www.w3.org/1999/xlink"
                                 xlink:href="#tpath">
                          Bonjour le Monde! Canvas
                       </textPath>
                     </text>
                  </svg>

iframe


                    <iframe id="accueil"

                      title="accueil"

                      width="500"

                      height="400"

                      src="./index.html">

                    </iframe>

iframe

View Larger Map

iframe

video


                   <video controls width="250">

                      <source src="...ogv"

                               type="video/ogg">

                      <source src="...mp4"

                               type="video/mp4">

                          Désolé, votre navigateur ne prend pas en charge les vidéos intégrées.

                   </video>

audio


                    <audio

                          controls

                          src=".wav">

                           Votre navigateur ne supporte pas l'élément audio.

                        </audio>

HTML5 Canvas

HTML5 Canvas

Objectifs

HTML5 Canvas

Histoire

Fonctionnement

canvas

Fonctionnement

canvas

Fonctionnement

canvas

Fonctionnement

getContext(...)

Fonctionnement

canvas

Fonctionnement

canvas

Fonctionnement

style.backgroundColor

Fonctionnement

width, height

Fonctionnement

3D en utilisant le contexte WebGL

Grille

Ligne

lineTo(...)

Ligne

lineTo(...)

Ligne

lineTo(...)

Ligne

beginPath()

Lignes

beginPath()

Lignes

beginPath()

Arc

arc(...)

Arc

arc(...)

Arc

arc(...)

Lignes et Arcs

sans moveTo()

Lignes et Arcs

avec moveTo()

Arc

arcTo(...)

Arc

arcTo(...)

Arc

arcTo(...)

Exemple

Courbe

Courbe de Bézier quadratique

quadraticCurveTo(...)

Courbe

quadraticCurveTo(...)

Courbe

Courbe de Bézier quadratique

quadraticCurveTo(...)

Courbe

Courbe de Bézier cubique

bezierCurveTo(...)

Courbe

bezierCurveTo(...)

Courbe

Courbe de Bézier cubique

bezierCurveTo(...)

Cercle

Cercle en utilisant arc(...)

Ellipse

ellipse(...)

Ellipse

ellipse(...)

Path2D

Path2D(...)

Path2D

Path2D(...)

Path2D