I need to create this pattern and I am using HTML canvas for creating this diagram. I am facing following issues -
- In right side circle text is not showing on top of the circle. That text need to be displayed on top of the circle.
- In other circles texts are not showing in straight directions. I need to stop the rotation of text. How can I solve this problem?
Please help me how to fix this problem. The code I have taken from different sources.
var ctx;
var canvas = document.getElementById('myCanvas');
function createCanvasPainting() {
if (!canvas || !canvas.getContext) {
return false;
}
canvas.width = 600;
canvas.height = 600;
ctx = canvas.getContext('2d');
ctx.strokeStyle = '#B8D9FE';
ctx.fillStyle = '#B8D9FE';
ctx.translate(200, 200);
drawChildCircles(4);
ctx.arc(0, 0, 40, 0, Math.PI * 2); //center circle
ctx.fill();
ctx.font = 'bold 13pt Calibri';
ctx.textAlign = 'center';
ctx.fillStyle = 'red';
ctx.textBaseline = 'middle';
ctx.fillText('Hi', 0, 0);
ctx.stroke();
}
function drawChildCircles(n) {
var ang_unit = Math.PI * 2 / n;
ctx.save();
for (var i = 0; i < n; i++) {
ctx.rotate(ang_unit);
ctx.strokeStyle = '#B8D9FE';
ctx.fillStyle = '#B8D9FE';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(150,0);
ctx.arc(150, 0, 40, 0, Math.PI * 2);
ctx.fill();
ctx.stroke();
ctx.font = 'bold 13pt Calibri';
ctx.textAlign = 'center';
ctx.fillStyle = '#000';
ctx.textBaseline = 'middle';
if (i==n-1) {
ctx.fillText('data not showing top', 150, 0);
} else {
ctx.fillText('OK', 150, 0);
}
}
ctx.strokeStyle = '#B8D9FE';
ctx.fillStyle = '#B8D9FE';
ctx.restore();
}
createCanvasPainting();<canvas id="myCanvas"></canvas>JSFiddle Link : https://jsfiddle.net/souravdikshit/nkfa97g6/17/