Bonjour,

j'essaie de me familiariser avec la balise canvas d'html mais sans succ�s.

Ici, je voudrais b�tement tracer deux lignes sur toute la longueur de mon canvas.

Sauf que je n'en ai qu'une seule qui est trac� et qu'elle n'a pas la dimension que je voudrais.
Les tentatives de modifications que j'ai faite sur les distances ne changent rien...

Quelque chose m'�chappe visiblement, en esp�rant que vous pourrez y voir plus clair que moi^^


Html

Code html : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
	<head>
		<title>Editeur de kifu</title>
		<meta charset="UTF-8">
		<meta name="description" content="Jeu de go: Kifu en ligne">
		<link rel="stylesheet" href="index.css">
		<script type="text/javascript" src="index.js"></script>
	</head>
 
	<body onload="test();">
		<h1>Editeur Kifu</h1>
		<div id="info">Info</div><!-- Zone d'en-tete info partie --> 
		<br/>
		<div id="goban"><canvas id="myCanvas">
    		Votre navigateur ne supporte pas canvas.
		</canvas></div><!-- Zone graphique --> 
		<br/>
		<div id="coupSup">Coup Sup</div><!-- Zone pour les coups qui ne peuvent être montré sur goban car pierre déjà joué avant et capturé par la suite --> 
 
	</body>
</html>

Css

Code css : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
h1{
	text-align: center;
}
 
#info{
	border-style: solid;
    border-width: 2px;
}
 
#goban{
	border-style: solid;
    border-width: 2px;
}
 
#coupSup{
	border-style: solid;
    border-width: 2px;
}
 
#myCanvas{
	width:500px; 
	height:500px;
	border:1px solid red;
	margin-left: 25%;
	margin-top: 1%;
	margin-bottom: 1%;
}


Javascript

Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function drawLine(x0,y0,xdest,ydest){
 
canvas = document.getElementById("myCanvas"); 
if (canvas.getContext)
{    
    context = canvas.getContext('2d'); 
}
 context.beginPath();
 context.fillStyle='black';
 context.lineWidth=1;
 context.moveTo(x0,y0);
 context.lineTo(xdest,xdest);
 context.stroke(); 
 return context;
}
 
function drawLine2(context,x0,y0,xdest,ydest){
 context.fillStyle='black';
 context.lineWidth=1;
 context.moveTo(x0,y0);
 context.lineTo(xdest,xdest);
 context.stroke();
 return context; 
}    
 
function test(){
	context=drawLine(0,0,0,500);
	drawLine2(context,26,0,26,500);
}
Merci � vous !