ajax не показывает canvas

Question

Я пытаюсь сделать предварительный просмотр тега имени перед тем, как пользователь его купит ... и я хочу, чтобы он обновлялся по мере их ввода ... но я столкнулся с проблемой. Тег имени отображается отлично, когда я отправляю POST из html-формы ... но когда я использую index.php ajax, он отображается пустым.

index.php

<script> 
$(document).ready(function(e){ 
    $('#nametag').bind('change keyup input', function(ev) { 
     ajax_post(); 
    }); 
}); 

function ajax_post(){ 
    // Create our XMLHttpRequest object 
    var hr = new XMLHttpRequest(); 
    // Create some variables we need to send to our PHP file 
    var url = "nametag.php"; 
    var line1 = document.getElementById("line11").value; 
    var line2 = document.getElementById("line21").value; 
    var line3 = document.getElementById("line31").value; 
    var line4 = document.getElementById("line41").value; 
    var vars = "line1="+line1+"&line2="+line2+"&line3="+line3+"&line4="+line4; 
    hr.open("POST", url, true); 
    // Set content type header information for sending url encoded variables in the request 
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    // Access the onreadystatechange event for the XMLHttpRequest object 
    hr.onreadystatechange = function() { 
     if(hr.readyState == 4 && hr.status == 200) { 
      var return_data = hr.responseText; 
      document.getElementById("status").innerHTML = return_data; 
     } 
    } 
    // Send the data to PHP now... and wait for response to update the status div 
    hr.send(vars); // Actually execute the request 
    document.getElementById("status").innerHTML = '<img src="images/nametag.png"/>'; 
} 
</script> 

<span id="status"></span> 

nametag.php

window.onload = function(){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 
    imageObj.onload = function(){ 
    context.drawImage(imageObj, 0, 0); 
    context.textAlign = "center"; 

    context.font = "bold 18pt Arial"; 
    context.fillText("<?=$_POST['line1']?>", canvas.width * 0.5, 70); 

    context.font = "12pt Arial"; 
    context.fillText("<?=$_POST['line2']?>", canvas.width * 0.5, 90); 

    context.font = "12pt Arial"; 
    context.fillText("<?=$_POST['line3']?>", canvas.width * 0.5, 120); 

    context.font = "12pt Arial"; 
    context.fillText("<?=$_POST['line4']?>", canvas.width * 0.5, 140); 
    }; 
    imageObj.src = "images/nametag.png"; 
    }; 
</script> 


<canvas width="282px" height="177px" id="myCanvas"></canvas> 

Answer 1

Вы должны быть в состоянии сделать это без AJAX, так как нет ничего для сервера делать. Вот пример скрипки. У меня нет изображения, но он должен работать, чтобы просто расколоть эти строки.

http://jsfiddle.net/WMNS3/

$(document).ready(function() { 
    var canvas = $('#myCanvas')[0]; 
    var context = canvas.getContext('2d'); 

    //var imageObj = new Image(); 
    //imageObj.src = "images/nametag.png"; 

    $('#nametag').bind('change keyup input', updateCanvas); 

    function updateCanvas() { 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     //context.drawImage(imageObj, 0, 0); 
     context.textAlign = "center"; 

     context.font = "bold 18pt Arial"; 
     context.fillText($('#line11').val(), canvas.width * 0.5, 70); 

     context.font = "12pt Arial"; 
     context.fillText($('#line21').val(), canvas.width * 0.5, 90); 

     context.font = "12pt Arial"; 
     context.fillText($('#line31').val(), canvas.width * 0.5, 120); 

     context.font = "12pt Arial"; 
     context.fillText($('#line41').val(), canvas.width * 0.5, 140); 
    } 

});