html5 холст - текст Update

Question

Вот мой проект: http://jsfiddle.net/fknjz/17/

Когда я набираю в текстовых полях под брезентом и нажмите кнопку «Обновить», он работает и добавить текст на холсте. Но каждый раз, когда я нажимаю UPDATE, он добавляет содержимое текстового поля по содержимому, напечатанному ранее. Таким образом, текст в холсте начинает складываться друг на друга.

Мне нужно изменить текст в Canvas, чтобы при нажатии кнопки UPDATE он фактически обновляет текст, а не создает новую текстовую строку текста поверх старой.

Любая идея, как это сделать?

Answer 1

Вы можете очистить холст так:

canvas.width = canvas.width; 

См обновленный fiddle. Обратите внимание, что вам нужно каждый раз перерисовывать изображение, так как полотно полностью очищается.

Или, как предложено apsillers и Joceyln, используйте метод холста clearRect. Это, однако, потребует от вас рассчитать площадь прямоугольника, который вы хотите очистить, что может потребоваться изменить в зависимости от количества текста, который вводит пользователь, и удалит разделы изображения, которое вы нарисовали в фоновом режиме (что может не быть проблема, если она всегда будет на белом фоне).

Answer 2

Помните, что холст - это всего лишь куча пикселей: когда вы делаете этот звонок до fillText, на холсте не отображаются символы, он видит набор пикселей. Кроме того, этот набор пикселей, как отдельная группа, сразу теряется - нет способа спросить холст: «Пожалуйста, удалите этот определенный набор пикселей, которые я только что добавил».

варианты:

• Использование clearRect вытирать прямоугольную часть рисунка.

• Использование canvas.width = canvas.width; для повторной инициализации состояния изображения на холсте. Это требует, чтобы вы перерисовали весь холст, тогда как clearRect дает вам больше точности.

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