I am interested in aligning the line drawn with canvas with the parent div, that is, the troke , since as I have it, the line drawn with canvas is deformed and is not complemented by the troke-background ... The canvas tag is found with width and the height at 100% but the line does not, I am also interested in moving the line with percentages, for example the variable aFinal is at 359 if I decrease it the line moves backwards and if I increase the number the line should be completed but on the contrary it returns as to start. I am interested in completing it and reducing it with percentages, that is, 50%, 60%, 70%, etc...
var elCanvas = document.getElementById("lienzo");
if (elCanvas && elCanvas.getContext) {
var context = elCanvas.getContext("2d");
if (context) {
var X = elCanvas.width/2;
var Y = 80;
var r = 50;
var aPartida = (Math.PI / 1) * 320;
var aFinal = (Math.PI / 180) * 359; // si disminuyo el 359 va acortandose la linea y si lo pongo en 360 se corta toda y no se "completa" como deberia ser
context.strokeStyle = "orange";
context.lineWidth = 20;
context.arc(X,Y,r,aPartida,aFinal,false);
context.stroke();
}
}
.troke{
position: relative;
width: 200px;
height: 200px;
/*background-color: #ddd;*/
display: flex;
align-items: center;
justify-content: center;
}
.troke-background{
position: absolute;
width: 100%;
height: 100%;
background-color: #f1f1f1;
border-radius: 50%;
}
.troke-circle{
position: absolute;
width: 80%;
height: 80%;
font-size: 25px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
#lienzo{
position: absolute;
height: 100%;
width: 100%;
z-index: 1;
}
<div class="troke">
<canvas id="lienzo"></canvas>
<span class="troke-background"></span>
<span class="troke-circle">50%</span>
</div>
I think what you want to achieve you can do with CSS alone. In any case, here is a possible solution using the canvas: