HTML5 Canvas

John Samuel
CPE Lyon

Année: 2018-2019
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

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.

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();

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);

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

                  }

                 }

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;

                   }

onmouseup


		    document.body.onmouseup = function(event) {

	              event = event || window.event;

	              event.preventDefault();

                    }

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>

Références

Crédits d'images

Wikimedia Commons

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

Ligne

lineTo(...)

Ligne

lineTo(...)

Ligne

lineTo(...)

Ligne

beginPath()

Lignes

beginPath()

Lignes

beginPath()

Arc

arc(...)

Arc

arc(...)

Arc

arc(...)

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(...)

Rectangle

rect(...)

Rectangle

rect(...)

Rectangle

fillRect(...)

Polygone

Polygone en utilisant lineTo()

Polygone

Polygone en utilisant lineTo()

Polygone

Polygone en utilisant lineTo()

Polygone

Polygone en utilisant lineTo()