Rectangle sur HTML5 Toile tendue

Question

Je travaille sur un site web et j'essaie d'obtenir des rectangles sur un canevas HTML5 avec javascript. Normalement ce n'est pas un problème mais maintenant quand je fais un rectangle avec la largeur et la hauteur de 10. Il semble qu'il fait un rectangle avec la largeur de 10 et la hauteur de 20.

Je fais le Rectangle comme ceci :

var canvas = $("#canvas"); 
var context = canvas.get(0).getContext("2d"); 

context.fillRect(0, 0, 10, 10); 

La toile div est réglé avec une largeur de 100%, mais j'ai essayé de lui donner une largeur fixe et qui n'a pas aidé non plus.

Answer 1

Vous devez définir une largeur et hauteur sur votre élément canvas, sinon cela peut être le résultat dans certains navigateurs.

<canvas id="canvas" width="400" height="300" /> 

Et vous ne pouvez pas définir la taille du canevas avec CSS, cela va étirer le canevas.

Answer 2

La taille par défaut de la toile est de 300 x 150

Vous utilisez probablement ces valeurs par défaut, ce qui rendra le rectangle regarde pas carré ....