<!DOCTYPE html>
<html lang="fi">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8"/>
<title>Rolling and rotating text</title>
</head>
<script>
var canvas = undefined;
var ctx = undefined;
var angle = -270;
var start = 0;
var i = 0;
const SCROLLTEXT = " B C D A ";
window.onload = function() {
canvas = document.getElementById("canvas");
canvas.setAttribute("width",document.documentElement.clientWidth);
canvas.setAttribute("height",document.documentElement.clientHeight);
ctx = canvas.getContext("2d");
ctx.font = "48px courier";
rotate_text();
}
function rotate_text() {
ctx.clearRect(0,0,document.documentElement.clientWidth,document.documentElement.clientHeight);
i = 0;
for (let angle2 = -270 - angle; angle2 < -270 + 360 - angle; angle2+=10) {
letter = SCROLLTEXT.substring(start + i, start + i + 1);
ctx.save();
ctx.translate(Math.cos((angle2) * (Math.PI / 180)) * 250, Math.sin(( angle2) * (Math.PI / 180)) * 250);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((angle2) * (Math.PI / 180));
ctx.translate(-canvas.width / 2, -canvas.height / 2);
ctx.fillStyle = "#1122FF";
ctx.fillText(letter, canvas.width / 2 , canvas.height / 2);
ctx.restore();
i++;
}
if (angle % 10 == 0) {
start+=1;
angle=0;
}
angle += 0.5;
if (start == SCROLLTEXT.length - 36) {
start = 0;
}
window.requestAnimationFrame(rotate_text);
}
</script>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
**I tried adding alphabet “A” inside this rotating alphabets But it didn’t work for me and I don’t know how to use fillText two times, So I am expecting to add alphabets inside this rotating alphabets **
**I tried adding alphabet “A” inside this rotating alphabets But it didn’t work for me and I don’t know how to use fillText two times, So I am expecting to add alphabets inside this rotating alphabets **