Нарисовал 2 фигуры через Canvas (JS). Первая исчезла, вторая осталась. Почему так?

Question

[distorting_reality]

Сначала нарисовал первую фигуру. Всё корректно и работает. Когда нарисовал вторую, первая исчезла. Да и еще вторая фигура рисуется куда ниже первой. Как исправить? Помогите, пожалуйста.

Весь код слишком ёмкий, потому напишу лишь параметры, которые, в основном, использовал:

context.beginPath();
context.moveTo();
context.quadraticCurveTo();
context.lineWidth = value;
context.strokeStyle = "color";
context.stroke();

Каждую фигуру начинал с

window.onload = function() {
	var canvas = document.getElementById("example");
	var context = canvas.getContext("2d");

P.S. В коде ошибок нет. Другая фигура - другой ID.

Answer 1

[Александр Таратин]

Не нужно каждую фигуру начинать с

var canvas = document.getElementById("example");
	var context = canvas.getContext("2d");

Контекст достаточно получить 1 раз

Comments

[distorting_reality]

А что тогда с Id? Он ведь у каждой фигуры разный

[Александр Таратин]

@distorting_reality Нет, фигуры внутри канваса не имеют id, они вообще не изменяемы, рисуются раз и навсегда.

[distorting_reality]

Что вы имеете ввиду?

[Сергей Протько]

@distorting_reality canvas это по сути картинка, при помощи контекста вы можете получить доступ к каждому пикселю этой картинки. Методы которые вы используете - это всего-лишь обертка, упрощающая жизнь.

У канваса нету слоев, если вы нарисовали что-то что закрывает часть объекта и затем хотите это дело "отменить", то вам придется отчистить холст и нарисовать заново все что должно было остатья.

[distorting_reality]

В общем, я не понял, но все равно спасибо

[distorting_reality]

И спасибо еще раз. Теперь я понял, как сделаю.