CODEWITHSUNDEEP
jqueryhtmlcsscanvas
Anonymoose
Anonymoose

Reputation: 2491

Setting dimensions of canvas element

I have a canvas which I link to a JSchart. I want the canvas height and width to be set dynamic through JQuery.

HTML

<canvas id="keyFiguresChart"></canvas>

JS

this.drawChart();
this.$("#keyFiguresChart").width(800);
this.$("#keyFiguresChart").height(200);

When I set the properties height and width before creating the chart, it doesn't work. A standard height and width is then calculated by the JSchart library.

When setting the height and width after creating the chart, the dimensions of the canvas are correct but the content is stretched out to match the dimensions.

Upvotes: 0

Views: 67

Answers (1)

net.uk.sweet
net.uk.sweet

Reputation: 12431

You're setting the CSS width and height properties of the canvas which causes it to stretch its contents. See jQuery documentation:

Try setting the width and height attributes of the element like this: 

// Assuming you've only got one Canvas on page.
this.$("#keyFiguresChart").attr('width', 800);
this.$("#keyFiguresChart").attr('height', 200);

Upvotes: 1

Related Questions