hi I would like to create a site where around an image you can see radial writing (link) (like sun rays). In fact I tried to put the image and through canvas I am trying to superimpose a circle and then connect the radial writings to it (a next step would be to make the writings move) however in fact I cannot generate the canvas rectangle of the same size image (to then have the right proportions to create the circle). I've tried getAttribute or $ {nameclass.width} and others. but i can't recover the image size with javascript. (On css I use the percentages to have a better adaptation with the subsequent implementations of @media)
<canvas id="myCanvas" >Error</canvas>
<div >
<img class="logo_centrale" src="img.png" alt="Errore" >
<script>
document.getElementById("myCanvas").style.border = ' 3px solid #f00 ' ;
document.write(document.getElementsByClassName("logo_centrale").width);
var l = document.getElementsByClassName("logo_centrale").width;/*doesn't work*/
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.strokeStyle = ' #fff ';
l = l / 2 ;
a = a / 2 ;
ctx.arc( l , a ,200,0,2*Math.PI);
ctx.stroke();
</script>
</div>
body {
position: fixed;
background-color: black;
}
*{
border: dashed;
border-color: white;
}
.logo_centrale{
z-index: -1;
max-width: 45%;
position: relative;
display: block;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
#myCanvas{ z-index: 2;
position:absolute;
width: 630px;
height: 430px;
margin-top: 11%;
margin-left: 27.3%;
}
You have to wait for the image to be ready before trying to get the size, then you can use .width and .height:
<img class="logo_centrale" src="img.png" alt="Errore" onload="process(event)">
<script>
function process(event) {
console.log(event.target.width)
console.log(event.target.height)
// your canvas code
}
</script>