CanvasまたはjQueryを使用して背景イメージにイメージとテキストを配置する方法は？

私はキャンバス/ 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