Reputation: 23
I am creating an applicattion to make mindmaps in Canvas and now i have problems with the resize of elements. Initially i have this:
<div id="lienzo">
<canvas id="canvas2" width="1000" height="1000">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
But any time i want to change the size of the canvas,ie change the width and height of the element canvas.
I have tried remove the canvas with:
$('canvas').remove();
And later create a new element canvas with:
$("<canvas/>",{id:'canvas2'}).appendTo('#lienzo');
$('canvas').width(500);
$('canvas').height(500);
Later i did this i redraw the element in Canvas but this elements look pixelated
Of course, in the new canvas I can´t selected the element.
I tried to change directly measures of Canvas but i have the same problem.
After explaining all, the question is, how could i change the size of Canvas on the fly without that the items in the canvas change. Any idea?
Thanks you for your time
Upvotes: 1
Views: 1127
Reputation: 75777
That's because the jQuery .width()
and .height()
methods change the size of the element with CSS, this is equivalent to scaling it, it doesn't change anything within the canvas element. If you want to change the number of pixels the canvas displays you need to set the .width
and .height
properties of the canvas element. Try this:
$('#canvas2')[0].width = 500;
$('#canvas2')[0].height = 500;
Upvotes: 3