Home/ Questions/Q 6952615
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:22:19+00:00

I have the following HTML… <body onload=draw();> <p><a href=><canvas class=demo2 width=6 height=12>Fallback</canvas> Back to

  • 0

I have the following HTML…

<body onload="draw();">

  <p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (1)...</a></p>
  <p><a href=""><canvas class="demo2" width="6" height="12">Fallback</canvas> Back to (2)...</a></p>

</body>

…and javascript:

function draw() {        
    var canvas2 = $('.demo2').get(0); // This draws in the first canvas
    //var canvas2 = $('.demo2').get(); This doesn't draw at all
    if (canvas2.getContext) {
        var ctx2 = canvas2.getContext('2d');

        ctx2.beginPath();
        ctx2.moveTo(6,0);
        ctx2.lineTo(6,12);
        ctx2.lineTo(0,6);
        ctx2.fillStyle = 'rgb(0,100,220)';
        ctx2.fill();
    }
}

What I’d like to happen is for the all canvases with the class demo2 to be drawn in.

I thought $('.demo2').get() would get all elements by that classname. $('.demo2').get(0) draws in the first one but I’d like to draw in them all.

Demo at http://jsfiddle.net/kMN3s/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use .each to execute things for each .demo2: http://jsfiddle.net/kMN3s/2/.

    function draw() {        
    $('.demo2').each(function() {
        if (this.getContext) { // `this` is an element each time
            var ctx2 = this.getContext('2d');

            ctx2.beginPath();
            ctx2.moveTo(6,0);
            ctx2.lineTo(6,12);
            ctx2.lineTo(0,6);
            ctx2.fillStyle = 'rgb(0,100,220)';
            ctx2.fill();
        }
    });
}
    • 0