キャンバス上のキャンバスまたはテキストがボタンクリックで消える

Question

キャンバス上またはキャンバス上のテキストが消えるボタンがクリックされると、わかりません。

このキャンバスを埋めるために使用されるスクリプト

<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> 

は、これは私がこれは私はボタンで画像

<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> 

に変換しようとしているテキストです画像をクリックすると

<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();" />