3

I'm loading a html into a DIV. The users are allowed to do some changes here. My question is how do I use drawImage() to duplicate it into another DIV?

I tried the below but it gives a blank canvas?

HTML:

<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">Does not support HTML5 canvas.</canvas>

JS:

$("#winNumbers").load("hourly/winningNums.html");

var img = $("#winNumbers");
$("#myCanvas").getContext("2d").drawImage(img, 0, 0, 100, 50);
Mukesh Ram
  • 6,248
  • 4
  • 19
  • 37
user3687622
  • 47
  • 1
  • 8
  • Have you tried just cloning the canvas element then appending it back to the page? – Judson Terrell Feb 16 '15 at 05:10
  • 1
    @JudsonTerrell: Thanks for your reply. No, How should I clone canvas element? – user3687622 Feb 16 '15 at 05:15
  • @JudsonTerrell: `$(myCanvas).html($(winNumbers).clone());` does not work. – user3687622 Feb 16 '15 at 05:20
  • You can't convert div contents into an image directly (as you've coded in your question). Please show the code for `hourly/winningNums.html`. If it's extremely simple html+css then you might be able to use a 3rd party library to convert the div contents to the canvas. If it's complicated html or css then you probably have to process it with a headless browser on the server. – markE Feb 16 '15 at 05:20
  • @markE: Thanks for your input. What are the other option available to duplicate a DIV? – user3687622 Feb 16 '15 at 05:27
  • That depends on how complex your `hourly/winningNums.html` html and CSS are. You can pull the html & CSS back to your server and create an image of the div content using a headless browser like phantomJS. – markE Feb 16 '15 at 05:28
  • If your div does not contains any images or external references (incl. css style sheets) you can convert your div and content to an inline SVG and draw that to canvas. Perhaps this answer will help: https://stackoverflow.com/questions/27230293/how-to-convert-svg-to-png-using-html5-canvas-javascript-jquery-and-save-on-serve/27232525#27232525 –  Feb 16 '15 at 06:02
  • @KenFyrstenberg: Yes it certainly helped. Thank you. – user3687622 Feb 16 '15 at 06:53
  • This answer will hep you http://stackoverflow.com/questions/16068047/jquery-duplicate-div-into-another-div – bicho Jul 29 '15 at 15:12

0 Answers0