개발이야기

javascript - canvas 에 텍스트 그리기

준호씨 2018. 12. 31. 20:07
반응형
  • canvas 에 text 를 그리고 싶다면 fillText 함수를 이용하면 된다.
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #my_canvas {
            border: 1px solid grey;
        }
    </style>
</head>
<body>
<canvas id="my_canvas" width="600" height="80"></canvas><br>
<input id="draw_text" value="안녕하세요. 반갑습니다.">
<script>

    document.getElementById("draw_text").addEventListener("keyup", function() {
        var canvas = document.getElementById("my_canvas");
        var context = canvas.getContext("2d");

        context.clearRect(0, 0, canvas.width, canvas.height);

        let text = document.getElementById("draw_text").value;

        context.font = "40pt BM YEONSUNG OTF";
        context.fillText(text, 10, 50);
    });

    document.getElementById("draw_text").dispatchEvent(new Event("keyup"));
</script>
</body>
</html>
반응형