Bonjour,

D'après ce que j'ai pu comprendre, lorsqu'on insère la balise canvas on "réserve" un espace dans lequel on peut insérer des formes et autres.
Dans l'exemple ci-dessous, dans l'espace canvas (id='pxl_canvas'), je dessine un rectangle avec l'instruction fillRect "fillRect(20,20,150,100)".
Lors de l'affichage, les contours ne sont pas nettes et pas dans les bonnes dimensions (forme qui a été grossie).
Si dans la feuille de style, j'enlève width et height, alors le contour et dimension sont ok. Et c'est là que je ne comprends pas. Pourquoi ? on réserve un espace et en quoi width et height influent-elles sur la forme ?

D'avance merci pour votre aide,
A+
Stéphane.

index.html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <canvas id='pxl_canvas'></canvas>
</body>
<script src="index.js"></script>
</html>

index.js
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
var pxlCanvas = document.getElementById("pxl_canvas");
var pxlCtx = pxlCanvas.getContext("2d");
pxlCtx.fillRect(20,20,150,100);


index.css
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
#pxl_canvas {
    position: absolute;
    top:50px;
    left:50px;
    width: 100%;
    height: 100%;
}