SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why text is not coming when preview is pressed ?

    Hi,

    I am trying to make this simple page in which i have 10 text fields and I display the user's entered text on the canvas. When html page is loaded the canvase loads a picture as background image and after that user enters some text in 10 text fields and upon pressing preview button it should show text in the canvas. If user needs to alter then they can again change anything in the text fields and upon pressing the Preview button it should show the new text and remove the old but its not happening. I also tried using save() and restore() but to no avail.

    How to do ? Below is my code.

    Thanks.


    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    function doCardPreview()
    {
    	ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    	var imageObj = new Image();
    	imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); };
    	imageObj.src = 'card1.jpg';
    	
    	// Now, Fill text on the freshly loaded image
    	
    	// field 1
    	ctx.font = "25px Arial Narrow";
    	ctx.fillStyle = "#722A4B";
    	ctx.textAlign="right"; 
    	ctx.fillText(frmData.field1.value,230,43);
    
    	// field 2
    	ctx.font = "12px Arial";
    	ctx.fillStyle = "#808080";
    	ctx.textAlign="right"; 
    	ctx.fillText(frmData.field2.value,230,58);
    
    	// field 3
    	ctx.font = "13px Arial";
    	ctx.fillStyle = "#000000";
    	ctx.textAlign="right"; 
    	ctx.fillText(frmData.field3.value,230,115);
    
    	// field 4
    	ctx.font = "13px Arial";
    	ctx.fillStyle = "#000000";
    	ctx.textAlign="right"; 
    	ctx.fillText(frmData.field4.value,230,135);
    
    
    	// RIGHT COL
    	
    	// field 5
    	ctx.font = "25px Arial Narrow";
    	ctx.fillStyle = "#656464";
    	ctx.textAlign="left"; 
    	ctx.fillText(frmData.field5.value,265,43);
    
    	// field 6
    	ctx.font = "13px Arial";
    	ctx.fillStyle = "#808080";
    	ctx.textAlign="left"; 
    	ctx.fillText(frmData.field6.value,265,70);
    
    	// field 7
    	ctx.font = "13px Arial";
    	ctx.fillStyle = "#808080";
    	ctx.textAlign="left"; 
    	ctx.fillText(frmData.field7.value,265,86);
    
    	// field 8
    	ctx.font = "13px Arial";
    	ctx.fillStyle = "#808080";
    	ctx.fillText(frmData.field8.value,265,102);
    
    	// field 9
    	ctx.font = "13px Arial";
    	ctx.fillStyle = "#808080";
    	ctx.fillText(frmData.field9.value,265,118);
    
    	// field 10
    	ctx.font = "13px Arial";
    	ctx.fillStyle = "#808080";
    	ctx.fillText(frmData.field4.value,265,134);
    	
    }
    </script>
    </head>
    <body>
    
    <form id="frmData" name="frmData">
    <table border="0" cellpadding="3" align="center">
    <tr>
    	<td><input type="text" name="field1" value="Name and Surname" /></td>
    	<td><input type="text" name="field2" value="Job Description" /></td>
    </tr>
    <tr>
    	<td><input type="text" name="field3" value="+91 9888-488-488" /></td>
    	<td><input type="text" name="field4" value="email.address@yourcompany.com" /></td>
    </tr>
    <tr>
    	<td><input type="text" name="field5" value="Company Name" /></td>
    	<td><input type="text" name="field6" value="Address Line 1" /></td>
    </tr>
    <tr>
    	<td><input type="text" name="field7" value="Address or City" /></td>
    	<td><input type="text" name="field8" value="Mobile: +91 9888-488-488" /></td>
    </tr>
    <tr>
    	<td><input type="text" name="field9" value="Fax: +91 172 4568488" /></td>
    	<td><input type="text" name="field10" value="Web: www.yourcompany.com" /></td>
    </tr>
    </table>
    <p align="center"><input type="button" name="btnPreview" value="Preview" onclick="doCardPreview();" /></p>
    </form>
    
    <p align="center">	
    <canvas id="myCanvas" width="490" height="290"></canvas>
    <script>
    	var canvas = document.getElementById('myCanvas');
    	var ctx = canvas.getContext('2d');
    	var imageObj = new Image();
    	imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0); };
    	imageObj.src = 'card1.jpg';
    </script>
    </p>
    
    </body>
    </html>

  2. #2
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    564
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Can anyone help with this ?? I am still trying to get this to work...

    Thanks.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •