C'est plus facile de tracer un rectangle qu'un segment avec "canvas": Pas besoin de "beginPath()", de "moveTo()" ni de "stroke()" pour avoir le rectangle complet. En fait il y a deux méthodes permettant de dessiner un rectangle: "strokeRect()" qui dessine juste le cadre du rectangle, et "fillRect()" qui dessine un rectangle rempli. Les deux méthodes acceptent 4 arguments chacune:
Les rectangles peuvent servir à restreindre le tracé (par intersection avec le rectangle); ils peuvent être dessinés en semi-transparence; on peut leur affecter un dégradé. Ils peuvent servir à effacer la figure (en la recouvrant d'un rectangle blanc) ou à tracer des histogrammes. Dans ce chapitre, on va dessiner des rectangles de Fibonacci, qui sont en fait des assemblages de carrés (comme ça on donne le même paramètre à la largeur et la hauteur).
=Rectangles de Fibonacci=
Pour que les carrés dont les côtés sont des nombres de Fibonacci s'assemblent bien, il faut les coller tantôt à droite, tantôt en haut, tantôt à gauche et tantôt en bas de l'assemblage. Le choix se fera selon la valeur de "n" (l'indice de la boucle) modulo 4, et c'est une bonne occasion d'utiliser le fameux "switch..case" de JavaScript:
Comment spiraler en JavaScript.
Pour garder une trace de la valeur de "n" modulo 4, on peut également changer de couleur de remplissage selon sa valeur ("a" et "b" sont les nombres de Fibonacci qu'on est en train de calculer):
 switch(n%4){
 case 0: {
 x+=a; y-=b-a;
 pinceau.fillStyle="Red";
 break;
 case 1: {
 x-=b-a; y-=b;
 pinceau.fillStyle="Green";
 break;
 case 2: {
 x-=b;
 pinceau.fillStyle="Blue";
 break;
 case 3: {
 y+=a;
 pinceau.fillStyle="Magenta";
 break;
À chaque fois, l'instruction "break" sert à éviter d'effectuer les autres déplacements après celui dont on a besoin.
Dessin des rectangles.
Le script complet n'est pas beaucoup plus long: Il s'agit de rajouter les deux premiers carrés autour desquels la construction va se faire, et les deux instructions de dessin des rectangles ("fillRect" pour le rectangle de couleur variable, et "strokeRect()" pour le bord):
<html>
<head>
<script>
</script>
</head>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="480" height="300">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.strokestyle="Blue";
pinceau.fillStyle="Cyan";
a=1;
b=1;
x=150;
y=100;
pinceau.strokeRect(x,y,1,1);
y-=1;
pinceau.strokeRect(x,y,1,1);
for(n=2;n<=12;n++){
 c=a+b;
 a=b;
 b=c;
 switch(n%4){
 case 0: {
 x+=a; y-=b-a;
 pinceau.fillStyle="Red";
 break;
 case 1: {
 x-=b-a; y-=b;
 pinceau.fillStyle="Green";
 break;
 case 2: {
 x-=b;
 pinceau.fillStyle="Blue";
 break;
 case 3: {
 y+=a;
 pinceau.fillStyle="Magenta";
 break;
 pinceau.fillRect(x,y,b,b);
 pinceau.strokeRect(x,y,b,b);
</script>
</canvas>
<br/>
</body>
</html>
Voilà le résultat avec 12 carrés:
Variante avec des arcs de cercles.
On peut aussi, au lieu des carrés, mettre des quarts de cercles qui se joignent:
<html>
<head>
<script>
</script>
</head>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="480" height="300">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.strokeStyle="Red";
pinceau.lineWidth="4";
pinceau.beginPath();
a=1;
b=1;
x=150;
y=100;
for(n=2;n<=12;n++){
 c=a+b;
 a=b;
 b=c;
 switch(n%4){
 case 0: {
 x+=a; y-=b-a;
 pinceau.arc(x,y,b,Math.PI/2,0,true);
 break;
 case 1: {
 x-=b-a; y-=b;
 pinceau.arc(x,y+b,b,0,-Math.PI/2,true);
 break;
 case 2: {
 x-=b;
 pinceau.arc(x+b,y+b,b,-Math.PI/2,Math.PI,true);
 break;
 case 3: {
 y+=a;
 pinceau.arc(x+b,y,b,Math.PI,Math.PI/2,true);
 break;
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
Ça donne cette spirale:
=Pixels vus comme rectangles=
Si la longueur et la largeur d'un rectangle font 1 pixel chacun, on peut remplir ce pixel seul avec un rectangle de dimensions 1 et 1.
Ensemble de Mandelbrot.
Voici un code informatique pour dessiner l'ensemble de Mandelbrot en Javascript dans le canvas, cette méthode va dessiner la fractale en entier :
var b = document.body;
var c = document.getElementsByTagName('theCanvas')[0];
var a = c.getContext('2d');
var w = c.width; // longueur du canvas
var h = c.height; // largeur du canvas
// Zoom pour dessiner la fractale dans tout le canvas 
x1 = ((-2.1*w)/500);
x2 = ((0.6*w)/500);
y1 = ((-1.2*h)/250);
y2 = ((1.2*h)/250);
zm = 100; // valeur du zoom
im = 50; // nombre d'itération maximum
ix = (x2-x1)*zm;
iy = (y2-y1)*zm;
for(x=0;x<ix;x++){
 for(y=0;y<iy;y++){
 cr=x/zm+x1; //partie réelle du nombre complexe c
 ci=y/zm+y1; // partie imaginaire du nombre complexe c
 zr=0;
 zi=0;
 i=0;
 do{
 tmp = zr;
 zr=zr*zr-zi*zi+cr; // partie réelle de Zn
 zi= 2*tmp*zi+ci; // partie imaginaire de Zn
 i++;
 } while(zr*zr+zi*zi<4 && i<im);
 if (i==im){
 a.fillRect(x,y,1,1);
 }

Le langage CSS/Listes
Les listes en HTML.
Les listes en HTML sont de différents types :
Numérotation et puces des items de la liste.
La propriété codice_8 s'applique aux balises codice_2 et permet de modifier le style de numérotation dans une liste ordonnée.
Listes ordonnées.
Par défaut la numérotation HTML s'incrémente automatiquement en chiffres arabes :
<ol>
<li>Premier</li>
<li>Deuxième</li>
<li value=99>Énième</li>
</ol>
donne :
De plus, elle peut avoir l'une des valeurs suivantes (liste non exhaustive) pour les listes ordonnées :
Exemple, en définissant un style :
En utilisant le style défini dans la feuille de style :
<div class="list-upper-roman">
<ul>
<li>Premier</li>
<li>Deuxième</li>
<li>Troisième</li>
<li>Quatrième</li>
<li>Cinquième</li>
</ul>
</div>
ou en appliquant directement un style à chaque item :
<ol>
<li style="list-style-type: katakana-iroha">Premier
<li style="list-style-type: katakana-iroha">Deuxième
<li style="list-style-type: katakana-iroha">Troisième
<li style="list-style-type: katakana-iroha">Quatrième
<li style="list-style-type: katakana-iroha">Cinquième
</ol>
Cela donne :
En utilisant le style défini dans la feuille de style :
ou en appliquant directement un style à chaque item :
Listes non ordonnées.
Elle peut avoir l'une des valeurs suivantes (liste non exhaustive) pour les listes non ordonnées :
Exemple :
<ul>
<li style="list-style-type: disc;">disc
<li style="list-style-type: circle;">circle
<li style="list-style-type: square;">square
<li style="list-style-type: none;">none
<li style="list-style-type: inherit;">inherit
</ul>
Cela donne :
Si l'on veut utiliser un autre caractère, typiquement un tiret cadratin ou demi-cadratin, il faut utiliser la propriété codice_18, par exemple
ul {
 list-style-type: none;
ul li:before {
 content: "\2014";
 position: absolute;
 margin-left: -1.5em;
Cela donne :
<templatestyles src=":Le langage CSS/Stylesheet.css" />
Utiliser une image comme puce.
La propriété codice_19 peut être utilisée pour spécifier l'URL d'une image à utiliser comme puce pour les items de la liste.
<li style="list-style-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Wikibooks-logo.svg/30px-Wikibooks-logo.svg.png);">image
Ce qui donne :

Photographie/Fabricants/Nikon/Nikon D700

Photographie/Fabricants/KMZ/KMZ Zenit 412

Photographie/Fabricants/Olympus/Olympus E-10

Photographie/Fabricants/Olympus/Olympus C-720 Ultra Zoom

Photographie/Fabricants/Olympus/Olympus C-2

Photographie/Fabricants/Olympus/Olympus C-3020 Zoom

Photographie/Fabricants/Minolta/Minolta Dynax 505si Super

Photographie/Fabricants/KMZ/KMZ Zenit 11

Livre de cuisine/Mousse au chocolat (2)
Livre de cuisine/Mousse au chocolat avec alcool (2)

Livre de cuisine/Mousse au chocolat aux œufs cuits

Dans cette recette de mousse au chocolat, les œufs sont cuits, lui donnant une texture ferme et une excellente conservation.
La base de la recette est une ganache pas trop épaisse. Au lieu de la mouler et de la laisser refroidir directement, on y ajoute des œufs fouettés et on cuit le tout.

Livre de cuisine/Tartelettes à la mousse au citron