    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>문자 그리기</title>
    </head>
    <body>
      <canvas id="myCanvas" width="600" height="400"
        style="border: 2px solid #cef"> </canvas>
      <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");
        let x = 50;
        let y = 50;
        let dx = 2;
        let dy = 2;

        function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = "blue";		// 폰트 색상
          ctx.font = "18px Gothic";		// 폰트 지정
          ctx.fillText("캔버스", x, y); 	// (x, y) 위치에 캔버스 문자가 나타남
          x = x + dx;
          y = y + dy;
          if (x + 50 > canvas.width || x < 0)
            dx = -dx;
          if (y + 5 > canvas.height || y - 18 < 0)
            dy = -dy;
          requestAnimationFrame(draw);
        }
        draw();
      </script>
    </body>
    </html>