Ajustement automatique balise canvas

**Cortexx** · 27/01/2013, 15h20

Bonjour,

depuis hier je galère à redimensionner automatiquement un bloc fait d'une balise canvas par rapport à une balise div parente.
J'explique en détail : le bloc div peu avoir une dimension fixe en largeur ou être redimensionner selon la taille de la page (pas de problème pour sa). Par contre ma balise canvas, qui est contenu dans ma div, n'accepte que des dimensions fixe, je n'arrive pas à répercuter automatiquement les dimensions de ma div à ma balise canvas. J'ai beau essayer tout un tas de code JS, CSS, HTML5 trouvé par ci par là mais rien y fait.

Pour plus de détail : je développe un module pour joomla avec comme javascript JQuery et TagCanvas,

Pouvez vous m'aider à résoudre se problème*?

Cordialement.

**NoSmoking** · 27/01/2013, 16h57

Bonjour,

Par contre ma balise canvas, qui est contenu dans ma div, n'accepte que des dimensions fixe,...

donnes une width:100% et une height:100% à ton canvas.

**Cortexx** · 27/01/2013, 17h38

Bien vue .... mais non. Si c'était aussi simple je ne demanderais pas d'aide

.

Mieux qu'un grand discours ... du code

.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" dir="ltr">
  <head>
    <title>Exemple</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.tagcanvas.js" type="text/javascript"></script>
    <script type="text/javascript">
	window.onload = function() {
		try {
			TagCanvas.Start('container','tags');
		} catch(e) {
			document.getElementById('block').style.display='none';
		} };
	</script>
 
  </head>
  <body >
    <div style="width:400px;height:400px;background-color:#000000">
		<div id="block">
		  <canvas id="container">
			<p>Votre Naviguateur ne prend pas en charge la balise canvas !</p>
		  </canvas>
		</div>
		<div id="tags">
		  <ul>
			<li><a href="#">Fish</a></li>
			<li><a href="#">Chips</a></li>
			<li><a href="#">Machin</a></li>
			<li><a href="#">Truc</a></li>
			<li><a href="#">Chips</a></li>
			<li><a href="#">Salt</a></li>
			<li><a href="#">Vinegar</a></li>
			<li><a href="#">Chouette</a></li>
			<li><a href="#">Truc Much</a></li>
			<li><a href="#">sdgsg</a></li>
			<li><a href="#">sdfsd ezt eaz</a></li>
			<li><a href="#">hgjgujkf </a></li>
			<li><a href="#">s dfdfsdf </a></li>
			<li><a href="#">s dfsdfeazrfe</a></li>
			<li><a href="#">ty e(yert</a></li>
			<li><a href="#">fgsdf aera</a></li>
			<li><a href="#">sy(eyzyazr</a></li>
			<li><a href="#">sdfgs dfsr</a></li>
		  </ul>
		</div>
	</div>
  </body>
</html>

Les deux ressources JS :

http://code.jquery.com/jquery.min.js
http://www.goat1000.com/jquery.tagcanvas.js?2.1

Exécutez le code et essayer de trouver comment dimensionner le canvas par rapport à la div. Faut pas oublier que la div peu avoir différente taille et que la canvas doit si ajuster automatiquement.

J'essaye toujours de trouver une solution à l'heure actuelle, pas moyen .. mais alors pas moyen d'y arriver

.

**NoSmoking** · 27/01/2013, 18h39

Aucun problème pour redimensionner seulement tu as une DIV qui verrouille

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div style="width:400px;height:400px;background-color:#000000">

Sinon il faut que tu mettes aussi une hauteur pour ton container, et un 100% en hauteur et largeur à ton canvas.

**Cortexx** · 27/01/2013, 19h39

Oui mais la c'est pour l'exemple, donc normal que la div ais des dimensions fixe

.
Pour le container, ou même la div block, tu aura beau mettre se que tu veux en dimension (en pourcentage) il ne sera jamais de la même dimension que la div principal.

**thelvin** · 27/01/2013, 23h26

La balise canvas s'ajuste parfaitement. J'ignore pourquoi tu persistes à dire le contraire.

En revanche le contenu du canvas est tout déformé, comme quand on redimensionne une image. C'est normal : une image a un certain nombre de pixels, et si on la redimensionne, elle doit afficher le même nombre de pixels, à l'intérieur d'un nombre différent de pixels.
Le canvas fonctionne pareil : il a une largeur et une hauteur en pixels, sur lesquels on dessine. Et il a aussi une largeur et une hauteur CSS, et son contenu va s'arranger pour occuper exactement cet espace.

Autrement dit CSS seul ne suffit pas à résoudre le problème : il faut aussi changer la taille intrinsèque du canvas quand sa taille CSS change.
Cela ne peut arriver que dans deux occasions :
- La fenêtre a été redimensionnée => window.addEventListener('resize') ou un équivalent jQuery.
- L'un de tes script a redimensionné un élément dont la taille du canvas dépend => Ce script doit aussi déclencher un réajustement de la taille du canvas.