Изменен размер холста HTML5 на лету

Question

Я создаю приложение для создания карт разума в Canvas, и теперь у меня проблемы с изменением размеров элементов.Первоначально у меня есть это:

<div id="lienzo">

            <canvas id="canvas2" width="1000" height="1000">

                This text is displayed if your browser does not support HTML5 Canvas.

            </canvas>

        </div>

Но каждый раз, когда я хочу изменить размер холста, то есть изменить ширину и высоту элемента canvas.

Я пытался удалить холстс:

$('canvas').remove();

И позже создайте новый холст элемента с:

$("<canvas/>",{id:'canvas2'}).appendTo('#lienzo'); 
$('canvas').width(500);
$('canvas').height(500);

Позже я сделал это, я перерисовал элемент в Canvas, но эти элементы выглядят неровно

Конечно, в новом холсте я не могу выбрать элемент.

Я пытался напрямую изменить размеры холста, но у меня та же проблема.

После объяснения всего вопроса возникает вопрос:Как я могу изменить размер холста на лету без изменения элементов холста.Есть идеи?

Спасибо, что уделили время

Answer 1

Это потому, что методы jQuery .width() и .height() изменяют размер элемента с помощью CSS, это эквивалентно его масштабированию, оно ничего не меняет внутри элемента canvas.Если вы хотите изменить количество пикселей, отображаемых на холсте, вам необходимо установить свойства .width и .height элемента canvas.Попробуйте это:

$('#canvas2')[0].width = 500;
$('#canvas2')[0].height = 500;