[whatwg] Canvas.cloneNode()

[Michael A. Puls II]

On Wed, 09 Dec 2009 12:08:29 -0500, Ian Hickson <ian at hixie.ch> wrote:

> On Fri, 30 Oct 2009, OmegaJunior wrote:
>>
>> Since Last Call was announced and I just ran into this problem, hereby
>> this question:
>>
>> If an image is drawn on a Canvas element, and subsequently the
>> javascript function cloneNode(true) is executed for that element, should
>> the clone include a copy of the source canvas image, or should it show
>> an empty space?
>>
>> From my perspective (the web author), I'd prefer to have the canvas
>> image included when executing (the deep) cloneNode(true), and excluded
>> it when using (the shallow) cloneNode(false).
>
> The cloneNode() method just clones the node, not the node's state, so the
> bitmap isn't copied. You can easily draw one bitmap onto the other,
> though, using drawImage().
>
>
> On Sat, 14 Nov 2009, Michael A. Puls II wrote:
>>
>> I think it'd be cool if the clone showed the image. But, I'm pretty sure
>> cloneNode(true) is just supposed to create a new canvas element with the
>> same attributes and childNodes as the original. It's not supposed to
>> copy everything that's going on with the element being copied.
>>
>> There are some exceptions with state for certain elements. Perhaps that
>> can happen with canvas too.
>
> I'd rather keep these exceptions to an absolute minimum. cloneNode() is
> part of the DOM Core API, and it would be bad for nodes to clone
> differently based on whether it's an HTML-aware UA implementing the DOM
> Core API or not.

Thanks.

I don't know canvas stuff that well. What's the proper way to patch  
cloneNode to do a full copy?

I think something like the following, but maybe you know better.

(function() {
     var oldCloneNode = HTMLCanvasElement.prototype.cloneNode;
     HTMLCanvasElement.prototype.cloneNode = function(deep) {
         var copy = oldCloneNode.call(this, deep);
         var copy_ctx = copy.getContext("2d");
         copy_ctx.drawImage(this, 0, 0, this.width, this.height);
         return copy;
     };
})();

-- 
Michael