Как изменить размер объекта HTML Canvas после создания с помощью createElement ()?

Question

Я создаю объект HTML Canvas, используя этот код JavaScript:

var Canvas = document.createElement("canvas");
Canvas.style.width = "500px";

а потом я рисую на нем текст.

Когда холст отображается, весь холст масштабируется (включая содержимое) до ширины 500 пикселей, что приводит к ужасной повторной выборке. Что я действительно хочу, так это чтобы контент оставался одинакового размера, только сам холст стал больше.

Есть идеи?

Answer 1

Попробуйте изменить ширину элемента вместо ширины CSS.

Canvas.width = 500;

Answer 2

Томас ответил правильно, но похоже, что вы также хотите сохранить существующий контент на холсте. Когда вы изменяете размер холста, он автоматически очищается и возвращается в состояние по умолчанию. По этой причине вам нужно будет либо перерисовать содержимое, либо скопировать содержимое в другой холст (используя drawImage), изменить размер холста, а затем скопировать содержимое обратно (снова, используя drawImage).