Javascriptを使用してキャンバスオブジェクトのテキストを変更します

Question

以下の例では、json.mesがAjaxからの受信メッセージです。キャンバスボックスにメッセージを表示するボタンがデザインされています。私はgetElementByIdを使ってメッセージを読み込もうとしました（下記参照）。ただし、動作しません。どんな解決策ですか？

<div> <button id="submit" type="button" class="btn btn-success" style="float: right;">Populate</button></div> 
<script> 
var canvas = document.getElementById("myCanvas3"); 
var ctx = canvas.getContext("2d"); 
ctx.fillRect(0, 0, 150, 150); 
ctx.fillStyle = "#dbbd7a"; 

ctx.font = "10px Comic Sans MS"; 
ctx.fillStyle = "red"; 
ctx.textAlign = "center"; 
ctx.fillStyle = "#ff0000"; 
ctx.fillText(document.getElementById("picoutput0"), 74, 74); 
</script> 

<script> 
... 
$("#submit").click(function(e) { 
... 
var text0=json.mes 
$('#picoutput0').html(text0); 
</script> 

Answer 1

innerHTML`。

var canvas = document.getElementById('myCanvas'), 
ctx = canvas.getContext('2d'); 
ctx.fillStyle = '#0e70d1'; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
var stringTitle = document.getElementById('title').textContent; 
console.log(stringTitle); 
ctx.fillStyle = '#fff'; 
ctx.font = '60px sans-serif'; 
ctx.fillText(stringTitle, 15, canvas.height/2 + 35); 

DEMO