html5 canvas in jquery array syntax

Question

am trying to not duplicate code by creating two query objects but not sure about the syntax. Any help would be appreciated

 var headers = $("h2.page-header");
var nav = $("ul#nav-main li a.active");
var links = [headers, nav];

    links.each(function() {
        var linkWidth = $(this).outerWidth();
        var canvas = $("<canvas></canvas>");
        canvas.attr({width: linkWidth, height: 48});
        var ctx = canvas.get(0).getContext("2d");

        ctx.save();
              ctx.beginPath();
              ctx.moveTo(linkWidth, 45.0);
              ctx.lineTo(6.5, 46.3);
              ctx.lineTo(0.0, 0.0);
              ctx.lineTo(linkWidth-2, 2.0);
              ctx.lineTo(linkWidth-4, 45.0);
              ctx.closePath();
              ctx.fillStyle = "rgb(27, 73, 218)";
              ctx.fill();
              ctx.restore();

        var image = canvas.get(0).toDataURL("image/png");
        $(this).css({background: "url('"+image+"') no-repeat"});

    });

Answer 1

You can simply you a simple CSS grouping selector:

var links = $("h2.page-header, ul#nav-main li a.active");

if, if you want to keep the two selectors separate use the .add() method:

var links = $("h2.page-header").add("ul#nav-main li a.active");