<![CDATA[
<!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>
]]>