Comment ajoute valeur du formualire sur image

<script type="text/javascript">

var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
canvas.width = $('img.img').width();
canvas.crossOrigin = "Anonymous";
canvas.height = $('img.img').height();
ctx.drawImage($('img.img').get(0), 0, 0);
ctx.font = "italic 26px Times";

$(document).ready(function(){
var x =$ ("#a1").val(),
y = $("#a2").val(),
i = $("#z1").val(),
j = $("#z2").val(),
r = $("#z3").val(),
a = $("#fin1").val(),
b = $("#fin2").val(),
c = $("#fin3").val();
$(document).on('input','#inp',function(){
//redraw image
//ctx.clearRect(0,0,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),400,80);
});
$(document).on('input','#nomf',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),100,80);
});
$("#a1, #a2,#z1,#z2,#z3,#fin1,#fin2,#fin3").change(function () {
if ($("#a1").is(":checked")) {
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
//ctx.fillText("",460,50);
ctx.fillText(x,460,50);
}
else if($("#a2").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(y,460,50);
}
else if($("#z1").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(i,400,130);
}
else if($("#z2").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(j,400,130);
}
else if($("#z3").is(":checked")) {
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(r,400,130);
}
else if($("#fin1").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(a,400,300);
}
else if($("#fin2").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(b,350,300);
}
else if($("#fin3").is(":checked")) {
// ctx.clearRect(320,320,canvas.width,canvas.height);
// ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText(c,250,300);
}
});
});
$(document).on('input','#enfant1',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),400,200);
});

$(document).on('input','#enfant2',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),90,200);
});

$(document).on('input','#place',function(){
//redraw image
ctx.clearRect(320,320,canvas.width,canvas.height);
//ctx.drawImage($('img').get(0), 0, 0);
//refill text
ctx.fillStyle = "red";
ctx.fillText($(this).val(),250,250);
});

</script>