Hình chữ nhật trên Canvas HTML5 được kéo dài

Question

Tôi đang làm việc trên một trang web và tôi cố gắng lấy hình chữ nhật trên canvas HTML5 bằng javascript. Thông thường điều này không có vấn đề gì nhưng bây giờ khi tôi tạo một hình chữ nhật với chiều rộng và chiều cao là 10. Có vẻ như nó làm cho hình chữ nhật có chiều rộng là 10 và chiều cao là 20.

Tôi đang làm hình chữ nhật như thế này :

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

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

Canvas div được đặt với chiều rộng 100% nhưng tôi cố gắng cố định chiều rộng cố định và không giúp được.

Answer 1

Bạn cần thiết lập chiều rộng và chiều cao trên phần tử canvas của bạn, nếu không điều này có thể là kết quả trong một số trình duyệt.

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

Và bạn không thể đặt kích thước canvas bằng CSS, thao tác này sẽ kéo căng canvas.

Answer 2

Kích thước mặc định của khung hình là 300 x 150.

Bạn đang có lẽ là sử dụng các giá trị mặc định, mà sẽ làm cho hình chữ nhật trông không vuông ....