如何使用Canvas或jQuery將圖像和文本放在背景圖像上？

我想要使用Canvas/jQuery將圖像和文本放在背景圖像上，但我不知道如何做到這一點。我需要這樣做http://static.catfly.com/quiz/which-friend-should-be-kidnapted-by-aliens/en/cover.jpg 如何使用Canvas或jQuery將圖像和文本放在背景圖像上？

我已經嘗試過，發現一些腳本的博客，但它不是完整的腳本，它只是一個圈子，任何人都可以幫助我嗎？

以下是我的腳本。

<body onload="displayImage()"> 

<script type="text/javascript"> 

    //Global variables 
    var myImage = new Image(); // Create a new blank image. 

    // Load the image and display it. 
    function displayImage() 
    { 
    // Get the canvas element. 
    canvas = document.getElementById("myCanvas"); 

     // Make sure you got it. 
     if (canvas.getContext) 
     { 
      // Specify 2d canvas type. 
      ctx = canvas.getContext("2d"); 

      // When the image is loaded, draw it. 
      myImage.onload = function() { 

      // Load the image into the context. 
      ctx.drawImage(myImage, 0, 0); 

      // Get and modify the image data. 
      changeImage(); 
      } 

      // Define the source of the image. 
      myImage.src = "https://pbs.twimg.com/profile_image/843519123711803393/pyYe9LFq_400x400.jpg"; 
     } 
    } 

    function changeImage() 
    { 
    ctx.strokeStyle = "white"; 
    ctx.lineWidth = "100"; 
    ctx.beginPath(); 
    ctx.arc(100, 100, 150, 0, Math.PI * 2, true); 
    ctx.closePath(); 
    ctx.stroke(); 
    } 
</script> 

<canvas id="myCanvas" width="200" height="200"></canvas> 

</body>

來源

2017-08-01 Jony Sheikh