Question

I currently draw on my canvas using this:

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

Which is all good and well, but this canvas is attached to a form, with a series of the same canvas element fading in when clicked on a handler.

I cannot insert the canvas tags using jquery as the canvas then doesn’t render, so I have to insert it directly into the page and then use css to hide it by default. As there are upto ten of these colour pickers on the page how can I instead get the canvas by class, using either jquery or plain ol’ javascript?

Answer 1

JQuery can always select elements by a selector, even when the tags aren’t aren’t recognised.

So, a bunch of canvas elements can be selected using jQuery after creation. Example:

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

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