이미지 위에 텍스트를 표시하고 싶은데 어떻게 해야될지 모르겠습니다 지금 텍스트가 이미지 아래에 나타나서 보이지 않는데 텍스트가 위쪽으로 나오게 어떻게하나요?
<canvas id="myCanvas" style="background-color:aliceblue" width="1000" height="600"></canvas>
<script>
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.fillStyle="magenta";
context.Align = "left";
context.font = "80px arial";
context.fillText("Spongebob",70,100);
var img = new Image();
img.onload = function(){
context.drawImage(img, 20, 20, 300, 200);
}
img.src = "그림.png";
필요한 코드도 같이 적어봅니다....
context.fillText("Spongebob",70,100)
그리고 나서 img.onload 가 실행될 때
context.drawImage(img, 20, 20, 300, 200);가 실행되니 글자위에 이미지를 출력하고 있습니다.
그렇다면 이미지를 출력하기 바로 직전에 글자를 출력하고 이미지를 그리면 되지 않겠습니까?
img.onload = function(){
.. 이곳에 글자를 출력해보세요.
context.drawImage(img, 20, 20, 300, 200);
}