Question

Here is my code to create a simple canvas,

var canvas1 = document.getElementById('colorPicker').getContext('2d');
gradient1 = canvas1.createLinearGradient(0, 0, colorPicker.width, colorPicker.height);
gradient1.addColorStop(0, 'rgb(255, 255, 255)');
gradient1.addColorStop(1, 'rgb(0, 0, 0)');
canvas1.fillStyle = gradient1;
canvas1.fillRect(0, 0, 500, 500);

Any way to change this to apply it to a class rather than an ID as I want it many time on one page?

Answer 1

Use a jQuery class selector, then .each() to loop through:

// Assumes colorPicker already exists
$('canvas.colorPicker').each(function(){
    var canvas1 = this.getContext('2d');
    gradient1 = canvas1.createLinearGradient(0, 0, colorPicker.width, colorPicker.height);
    gradient1.addColorStop(0, 'rgb(255, 255, 255)');
    gradient1.addColorStop(1, 'rgb(0, 0, 0)');
    canvas1.fillStyle = gradient1;
    canvas1.fillRect(0, 0, 500, 500);
});