CODEWITHSUNDEEP
javascript
user1739140
user1739140

Reputation: 211

html5 canvas aspect ratio?

In html5 canvas element use I have a problem with default aspect ratio. The default aspect ratio for the canvas element in Firefox and Safari, at least appears to be 2/1 for width and height. This is the only combination of height and width that will produce a 1:1 aspect ration for rectangle drawn to the canvas element.

So, how do I set the aspect ratio for the canvas element that will allow a 1:1 ratio for items drawn to it?

I have an account with Coding Forums and have not gotten an adequate response. I have obtained some print texts on the subject but they do not address this. I have been programming javascript/html/css for at least 10 years.

I hope I'm not stuck with a unalterable default ratio.

Looking over the list of similar questions, I don't see this particular issue addressed.

Upvotes: 0

Views: 3245

Answers (1)

user3714646
user3714646

Reputation: 11

The Canvas can have it's own width and height which is independent of the Dom element. This is causing the non 1:1 aspect ratio.

To fix you need to set the width and height attributes to match the width and height of the dom containing element.

For example, in jquery you can do the following.

$('canvas').attr('width', '100').attr('height', '100');

This will make your canvas a 100 pixel square. Assuming this is in a dom element with matching width and height properties then you'll get 1:1 aspect ratio.

Upvotes: 1

Related Questions