Pour tracer un segment, il suffit de fournir les coordonnées de son extrémité (donc 2 nombres), du moment que c'est après "beginPath()" et avant "stroke()". Les segments sont donc plus faciles à tracer que les courbes de Bézier, et plus rapides à tracer aussi. En plus, en utilisant "moveTo()" on peut tracer des segments discontinus (ou des graduations). La principale question est "où est l'origine du segment?". En fait elle est mémorisée comme la position actuelle du pinceau, définie par le dernier "moveTo()" ou le dernier "lineTo()" appliqué. Ceci permet de tracer des polygones ou de représenter graphiquement des fonctions.
=Exemples de base=
Segment.
Segment en traits pleins.
L'algorithme est le suivant:
Voici un exemple:
<html>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.beginPath();
pinceau.moveTo(50,100);
pinceau.lineTo(350,100);
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
Segment en pointillés.
Avec une boucle.
On peut faire un segment en pointillés avec une boucle, en alternant les traits tracés (avec "lineTo()") et les traits non tracés (avec "moveTo()"):
<html>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.beginPath();
pinceau.moveTo(50,100);
for(n=1;n<=30;n+=2){
 pinceau.lineTo(50+n*10,100);
 pinceau.moveTo(60+n*10,100);
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
Une variante permet d'ajouter des graduations (en faisant des pointillés perpendiculaires au segment).
Avec un dégradé.
<html>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
var pointille=pinceau.createLinearGradient(50,100,350,100);
for(n=0;n<=15;n++){
 pointille.addColorStop(n/16,"Black");
 pointille.addColorStop((n+0.499)/16,"Black");
 pointille.addColorStop((n+0.501)/16,"White");
 pointille.addColorStop((n+0.999)/16,"White");
pinceau.strokeStyle=pointille;
pinceau.beginPath();
pinceau.moveTo(50,100);
pinceau.lineTo(350,100);
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
Cette variante, qui nécessite aussi une boucle (pour fabriquer le dégradé), présente l'avantage de s'appliquer aussi à des courbes.
Triangle.
Pour tracer un polygone, il faut faire un "lineTo()" pour chaque côté (en n'oubliant pas de revenir au point de départ):
<html>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.beginPath();
pinceau.moveTo(50,150);
pinceau.lineTo(350,150);
pinceau.lineTo(200,50);
pinceau.lineTo(50,150);//pour refermer le triangle
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
Une variante consiste à remplir le triangle au lieu de seulement dessiner ses côtés, et dans ce cas le dernier côté n'est pas nécessaire:
<html>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="400" height="200">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.moveTo(50,150);
pinceau.lineTo(350,150);
pinceau.lineTo(200,50);
pinceau.fill();
</script>
</canvas>
<br/>
</body>
</html>
Fonction.
Pour représenter graphiquement une fonction, il suffit de dessiner un polygone ayant beaucoup de côtés assez petits pour donner l'illusion d'une courbe. Par exemple, pour dessiner une parabole on peut faire comme ceci:
<html>
<style type="text/css">
</style>
<body>
<canvas id="cadre" width="400" height="400">
<script>
var chevalet=document.getElementById('cadre');
var pinceau=chevalet.getContext('2d');
pinceau.strokeStyle="Red";
pinceau.beginPath();
pinceau.moveTo(0,0);
for(x=0;x<=400;x++){
 pinceau.lineTo(x,400-Math.pow(x-200,2)/100);
pinceau.stroke();
</script>
</canvas>
<br/>
</body>
</html>
On peut ajouter des axes gradués avec d'autres boucles:
pinceau.strokeStyle="Blue";
pinceau.beginPath();
pinceau.moveTo(0,400);
pinceau.lineTo(400,400);
for(x=0;x<=400;x+=20){
 pinceau.moveTo(x,400);
 pinceau.lineTo(x,395);
pinceau.stroke();
Et quelque chose d'analogue pour l'axe des ordonnées (attention à ne pas oublier qu'il est "à l'envers").
=Arbre de Stern-Brocot=
L'utilisation de boucles JavaScript permet de construire des polygones très complexes, comme par exemple le flocon de Von Koch. Ici on va plutôt dessiner l'arbre de Stern-Brocot. Le dessin d'un arbre se fait par récurrence: Le principe est de dessiner la branche gauche et la branche droite (des segments) puis de rajouter à leur extrémité un (sous-)arbre. Pour calculer les coordonnées des extrémités des segments, on utilise le développement en fraction continue d'une fraction:
Si le développement en fraction continue est "[a1,a2,a3...,an]" alors
L'algorithme de tracé de l'arbre peut donc s'écrire
La condition pour finir la récurrence est la taille du dénominateur: S'il est trop grand (en pratique, supérieur ou égal à 400) la fraction est proche de la canopée de l'arbre (l'axe des abscisses) et on s'arrête.
Calculs sur les fractions.
Comme on ne fait pas beaucoup de calculs sur les fractions, il n'est pas absolument nécessaire de créer un objet "fraction" en JavaScript. On se contentera ici de représenter la fraction formula_1 par le tableau "[p,q]". De même, la fraction continue (une suite d'entiers naturels) sera représentée par un tableau JavaScript.
Conversion en fraction continue.
L'algorithme de conversion de fraction vers fraction continue (noté ci-dessous "frac2cont" en anglais: "fraction to continued fraction") est assez simple à décrire: Répéter la suite d'opérations
Quelques astuces javascriptiennes ont été utilisées ci-dessous, pour raccourcir le code: 
function frac2cont(f){
 var cont=[Math.floor(f[1]/f[0])];
 for(var n=0;f[1]>1;n++){
 f=[f[1],f[0]];
 f[0]-=cont[n]*f[1];
 cont[n+1]=Math.floor(f[1]/f[0]);
 cont.pop();
 return cont;
L'instruction "pop" vers la fin est dûe à ce que la boucle est parcourue une fois de trop, et donc le dernier élément du tableau contient ∞ à cause d'une division par zéro. JavaScript possède une sorte d'esprit d'initiative, préférant anticiper sur ce que voulait le programmeur, plutôt que tout bloquer avec un message d'erreur (ce qui n'est pas surprenant, on souhaite rarement que l'internaute voie une page bloquée parce que le webmestre a fait n'importe quoi).
Conversion en fraction.
On peut obtenir les réduites d'une fraction continue avec deux suites doublement récurrentes (façon Fibonacci) dont les coefficients sont ceux de la fraction continue. Comme cette fonction JavaScript réalise l'inverse de la précédente, elle est nommée "cont2frac" (pour l'anglais "continued to fraction"):
function cont2frac(c){
 //suite des numérateurs et des dénominateurs
 var num=[0,1];
 var den=[1,0];
 for(n in c){
 num=[c[n]*num[0]+num[1],num[0]];
 den=[c[n]*den[0]+den[1],den[0]];
 return [num[0],den[0]];