<!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>