CODEWITHSUNDEEP
javascripthtmlcanvas
user727763
user727763

Reputation: 23

Modified size of canvas HTML5 on the fly

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

Answers (1)

robertc
robertc

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

Related Questions