HTML 5 canvas и getElementByID

Question

Я сейчас рисую на холсте, используя это:

var colorPicker = document.getElementById('colorPicker');

Это все хорошо, но этот холст прикреплен к форме, и при нажатии на обработчик появляется серия из одного и того же элемента холста.

Я не могу вставить теги холста, используя jquery, поскольку холст тогда не рендерится, поэтому мне нужно вставить его прямо на страницу, а затем использовать css, чтобы скрыть его по умолчанию. Поскольку на странице имеется до десяти таких палитр цветов, как я могу вместо этого получить холст по классу, используя jquery или обычный старый javascript?

Answer 1

JQuery всегда может выбирать элементы с помощью селектора, даже если теги не распознаются.

Таким образом, группа элементов canvas может быть выбрана с помощью jQuery после создания. Пример:

$(".canvasClassName").each(function(){
   alert(this); //Alert: [HTMLCanvasElement]
});

//Get a random color picker canvas element:
var colorPicker = $(".colorPicker").get(0); //Returns first Canvas.color element