캔버스에 캔버스 또는 텍스트가 사라짐 버튼 클릭시

Question

캔버스에서 캔버스 또는 텍스트가 사라지는 경우 단추를 클릭 할 때 확신이 없습니다.

이

이 나는 ​​이미지

<div id="the_text"> 
    &nbsp;<asp:Label ID="lblfirstname" runat="server" Text="First Name" Font-Names="Arial" Font-Bold="true"></asp:Label> 
    <asp:Label ID="lbllastname" runat="server" Text="Last Name" Font-Names="Arial" Font-Bold="true"></asp:Label> 
    <br /> 
    <br /> 
</div> 
<div id="div_position" runat="server"> 
    <asp:Label ID="lblposition" runat="server" Font-Names="Arial" ForeColor="#0099FF" Text="Position"></asp:Label> 
</div> 
<div id="show_img_here" runat="server"> 
</div> 

이로 변환하려고 텍스트는

<script> 
     window.onload = function() { 
      $("#show_img_btn").on("click", function() { 
       var can = document.createElement("canvas"); 
       can.width = 500; 
       can.height = 500; 
       var cvs = can.getContext('2d'); 
       cvs.font = "20px Arial"; 
       var text = $("#the_text").text(); 
       var text2 = $("#div_position").text(); 
       cvs.fillText(text, 10, 50); 
       cvs.fillText(text2, 20, 70); 
       var img = document.createElement("img"); 
       img.src = can.toDataURL(); 
       $("#show_img_here").append(img); 
      }); 
     }; 
</script> 

캔버스를 채우는 데 사용되는 스크립트 것은 난 버튼입니다에

<asp:Button ID="show_img_btn" runat="server" Text="Create Image" /> 

Answer 1

변경합니다 이미지에 함수의 이름을 변환 할 수 클릭 함수의 끝에서 0

$("#show_img_btn").on("click", function DisplayImage() 

당신이 뭘 하려는지 버튼 클릭 이벤트

<input id="show_img_btn" type="button" value="Create Image" onclick="DisplayImage();" />