Content retention when cloning HTML5 canvas

Content retention when cloning HTML5 canvas

Hi,

I am trying to clone an HTML5 canvas element with content drawn dynamically on it. However, when I use .clone() on the element, the contents are not copied.

I tried attaching an example .html file to illustrate the problem, but the forum does not allow me to. Instead, I'm pasting the code below:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Sandbox</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(function() {
  9. $("#btnDraw").click(handleDraw);
  10. $("#btnClone").click(handleClone);
  11. });

  13. function handleDraw() {
  14. var context = $("#myCanvas")[0].getContext("2d");
  15. context.fillStyle = "rgb(255,0,0)";
  16. context.fillRect(30, 30, 50, 50);
  17. };

  19. function handleClone() {
  20. var clone = $("#myCanvas").clone();
  21. var target = $("#target")
  22. target.children().remove();
  23. target.append(clone);
  24. };
  25. </script>
  26. <style>
  27. canvas { border: solid 1px #aaa }
  28. </style>
  29. </head>
  30. <body>
  31. <canvas id="myCanvas" height="200" width="200">
  32. Hi. Lorem ipsum.
  33. </canvas>
  34. <br />
  35. <br />
  36. <input type="button" id="btnDraw" value="Draw" />
  37. <input type="button" id="btnClone" value="Clone" />
  38. <br />
  39. <br />
  40. <div id="target"></div>
  41. </body>
  42. </html>

If you click on the "Draw" button and then "Clone", you'll see that the canvas element is copied, but the contents are dropped.

Any help would be greatly appreciated.

Thanks,
Elliot