Skip to content

Copy canvas contents when creating a drag image#157

Open
Zohenn wants to merge 1 commit into
rlemaigre:masterfrom
Zohenn:canvas-fix
Open

Copy canvas contents when creating a drag image#157
Zohenn wants to merge 1 commit into
rlemaigre:masterfrom
Zohenn:canvas-fix

Conversation

@Zohenn
Copy link
Copy Markdown

@Zohenn Zohenn commented Jun 16, 2025

As MDN documentation for cloneNode states (https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode), if this method is used on a canvas element, the painted image is not copied.

I am currently refactoring a Svelte app to use Vue and the library I used for Svelte handled that case. You can check their solution at https://github.com/isaacHagoel/svelte-dnd-action/blob/2d1190619d9259c7f5ffd858bd4bf8a2ad76e7ad/src/helpers/svelteNodeClone.js. I did the same for this library, only without explicit copying of width and height attributes, as those are copied by cloneNode.

Here's how it worked before:
Screencast From 2025-06-16 17-21-18.webm

And here's how it works with changes from this PR:
Screencast From 2025-06-16 17-22-04.webm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant