I am creating two wheels with spikes. I am placing text on the spikes like shown in the image(In the image there is only one text for each image but I have placed a text at each spike of each wheel). My plan was to rotate the wheels individually and then when the texts will come in front of each other I will make the complete word joining the two words.
But Now I am unable to find a way to get the text from the canvas. For example I am confused that how can I get the text placed at the place of "text1" in the image below.
Here is the code: HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" style="border:solid 1px black;position:absolute;left:0;right:0;margin:auto;"></canvas>
<!-- <button id='clockwiseBtn'>Wheel1</button>
<button id='antiClockwiseBtn'>Wheel2</button> -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>
JS
const wheelImg = new Image;
wheelImg.src = "w.png";
// canvas.width = innerWidth - 30;
// canvas.height = innerHeight - 40;
canvas.width = 700;
canvas.height = 450;
const ctx = canvas.getContext("2d");
const wheelScale = 0.4; // scales the wheels
const rotateCount = 30; // frames (@60 per second)
var activeWheelCount = 0; // to track if any wheels are active
var myXPos = canvas.width/2, myYPos = canvas.height/2;
// when the image has loaded set up click events and draw the first frame
wheelImg.addEventListener("load",() => {
requestAnimationFrame(mainLoop)
// clockwiseBtn.addEventListener("click",() => wheels[0].start(Math.PI / 2));
// antiClockwiseBtn.addEventListener("click",() => wheels[1].start(-Math.PI / 2));
canvas.addEventListener("touchmove",moveWheel,true);
canvas.addEventListener("touchstart",startWheel,true);
canvas.addEventListener("touchend",endWheel,true);
}
,{once:true}
);
function startWheel(e){
e.preventDefault();
myXPos = canvas.width/2;
myYPos = canvas.height/2
}
function endWheel(e){
e.preventDefault();
myYPos = e.touches[0].pageY;
myXPos = e.touches[0].pageX;
}
function moveWheel(e){
e.preventDefault();
if(e.touches[0].pageX < canvas.width/2 && e.touches[0].pageY < canvas.height/2){ // 1st quadrant
if(myXPos < e.touches[0].pageX && myYPos < e.touches[0].pageY){
console.log("1 left to right and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
wheels[0].start(Math.PI/72);
}else if(myXPos < e.touches[0].pageX && myYPos > e.touches[0].pageY){
console.log("2 left to right and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
wheels[0].start(Math.PI/72);
}else if(myXPos > e.touches[0].pageX && myYPos < e.touches[0].pageY){
console.log("3 right to left and up to down ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
wheels[0].start(-Math.PI/72);
}else if(myXPos > e.touches[0].pageX && myYPos > e.touches[0].pageY){
console.log("4 right to left and down to up ",myXPos, e.touches[0].pageX, myYPos , e.touches[0].pageY);
wheels[0].start(-Math.PI/72);
}
myXPos = e.touches[0].pageX;
myYPos = e.touches[0].pageY;
}else if(e.touches[0].pageX < canvas.width/2 && e.touches[0].pageY > canvas.height/2){// 3rd quadrant
}else if(e.touches[0].pageX > canvas.width/2 && e.touches[0].pageY < canvas.height/2){ // 2nd quadrant
}else{// 4th quadrant
}
// if(){
//
// }else{
// }
// wheels[0].start(Math.PI / 9);
}
// defines a single wheel
const wheel = (x,y,rot) => ({
x,y,rot,
rotTarget: rot,
counter: 0,
start(ang) { // command a wheel to turn
if (!this.counter ) { // make sure not already turning
this.counter = rotateCount;
this.rotTarget += ang;
if (!activeWheelCount) { requestAnimationFrame(mainLoop) } // start the
// animation is no wheel
// is active
activeWheelCount ++;
}
},
update() { // update the wheel animation counter
this.counter += this.counter > 0 ? -1 : 0;
if (this.counter === 0) { this.rot = this.rotTarget }
else { activeWheelCount += 1 } // count this wheel as an active wheel
},
draw() { // draw the wheel
const r = (1 - (this.counter / rotateCount)) * (this.rotTarget - this.rot) + this.rot;
ctx.setTransform(wheelScale, 0, 0, wheelScale, this.x, this.y);
ctx.rotate(r);
ctx.drawImage(wheelImg, -wheelImg.width / 2, -wheelImg.height / 2);
console.log("Inside draw ",this.x)
if(this.x < 300){
ctx.font = "30px Arial";
ctx.fillText("Text1",wheelImg.width/2,5);
}else{
ctx.save();
ctx.translate(10,-10);
ctx.rotate(Math.PI/4);
ctx.fillText("Text9",wheelImg.width/2,5);
ctx.restore();
ctx.translate(10,10);
}
}
});
const wheels = [wheel(90,80, 0), wheel(350,80,0)]; // create two wheels
function mainLoop() { // animates wheels
activeWheelCount = 0;
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
wheels.forEach(wheel => wheel.update());
wheels.forEach(wheel => wheel.draw());
if (activeWheelCount) {
requestAnimationFrame(mainLoop);
}
}
I am using this image of wheel