Leinwand toDataURL not returning a complete image

Baue ich ein jQuery-plugin, das Wasserzeichen Bilder (und ja, ich bin mir bewusst, das multitudinal Nachteile einer javascript - /html5-Wasserzeichen-system, aber einfach ignorieren, dass für jetzt.) Die grundlegende Methode für jedes Bild:

• fügen Sie das Bild in den hintergrund einer Leinwand
• fügen Sie die Daten ein Wasserzeichen über das,
• ersetzen Sie die src der original-Bild mit der Leinwand (die jetzt enthält das Wasserzeichen.)

Nun scheint es zu funktionieren, wenn ich ersetzen Sie die image-element mit der Leinwand selbst.. alle Elemente erscheinen auf der Leinwand. Aber wenn ich die dataURL von der Leinwand, alles, aber das Letzte Bild gezeichnet, die auf Sie erscheint. Ich würde nicht einmal Sinn, außer dieses plugin muss auch ersetzen die links zu Bildern, und so ersetzen Sie die hrefs mit data-urls (mit dem Wasserzeichen.)

Dies ist der aktuelle code:

(function($){

    $.fn.extend({

        cmark: function(options) {

            var defaults = {
                type: 'image',
                content: 'watermark.png',
                filter: 'darker',
                scale:300,
                box: {
                    top         :   0.5,
                    left        :   0.5,
                    width       :   0.75,
                    height      :   0.75,
                    bgcolor     :   '#000000',
                    bgopacity   :   0.5,
                    fgopacity   :   1
                },

                callback_unsupported: function(obj){
                    return obj;
                }

            }

            var getScale = function(w, h, scale){
                ratio = Math.min(scale/w, scale/h);
                scalew = Math.round(ratio*w);
                scaleh = Math.round(ratio*h);
                return [scalew,scaleh];
            }



            var options =  $.extend(defaults, options);

            return this.each(function() {

                obj = $(this);

                canvas = document.createElement('canvas');

                if(!window.HTMLCanvasElement){
                    return options.callback_unsupported(obj);
                }


                /*  if selecting for images, reset the images. Otherwise, 
                    we're replacing link hrefs with data urls. */

                if(obj.attr('src')){
                    target_img = obj.attr('src');
                }

                else if (obj.attr('href')){
                    target_img = obj.attr('href');
                }

                //get the filetype, make sure it's an image. If it is, get a mimetype. If not, return.

                ftype = target_img.substring(target_img.lastIndexOf(".")+1).toLowerCase();

                canvasbg = new Image();

                canvasbg.onload = function(){
                    iw = canvasbg.width;
                    ih = canvasbg.height;

                    scale = getScale(iw, ih, options.scale);

                    iw = scale[0];
                    ih = scale[1];

                    canvas.setAttribute('width', iw);
                    canvas.setAttribute('height', ih);

                    ctx = canvas.getContext('2d');

                    /* define the box as a set of dimensions relative to the size of the image (percentages) */

                    bw = Math.round(iw * options.box.width);
                    bh = Math.round(ih * options.box.height);

                    //for now the box will only ever be centered.
                    bx = Math.round((iw * options.box.top) - (bw/2));
                    by = Math.round(ih * options.box.left - (bh/2));

                    /* draw the box unless the opacity is 0 */
                    if(options.box.bgopacity > 0){
                        ctx.fillStyle = options.box.bgcolor;
                        ctx.globalAlpha = options.box.bgopacity;
                        ctx.fillRect(bx, by, bw, bh);
                    }

                    wm = new Image();

                    wm.onload = function(){
                        ww = wm.width;
                        wh = wm.height;

                        scalar = Math.max(bw, bh); //scale to within the box dimensions
                        scale = getScale(ww, wh, scalar);
                        ww = scale[0];
                        wh = scale[1];

                        ctx.globalCompositeOperation = options.filter;
                        ctx.drawImage(wm, bx, by, ww, wh);
                    }

                    wm.src = options.content;

                    ctx.drawImage(canvasbg, 0, 0, iw, ih);

                    obj.replaceWith(canvas);

                    $('body').append('<img src="'+canvas.toDataURL()+'">');

                    //obj.attr('src', canvas.toDataURL());
                }

                canvasbg.src = target_img;



            });
        }
    })
})(jQuery);

Fügte ich eine Zeile, die gibt ein Bild mit der data-url, die direkt auf der Seite für das testen und das ist, was ich sehe... auf der linken Seite ist das canvas-element, auf der rechten Seite ist das Bild mit dem data-url:

Also ja, das hat mich ratlos für ein paar Tage jetzt. Ich bin wahrscheinlich etwas fehlt schrecklich offensichtlich, aber ich kann es nicht sehen.

... editiert, weil das Beispiel ist nicht mehr online. sorry.