I'm trying to make a ball made by .arc function grow with time, and i want to be able to specify the duration. this is where I'm stuck:
function start(){
var ball1,ball2,ball3,ball4;
var ball=document.getElementById("MyCanvas");
ball1=ball.getContext("2d");
ball1.fillStyle="yellow";
ball1.beginPath();
ball1.arc(95,50,40,0,2*Math.PI);
ball1.fill();
scaling(ball1);
}
function scaling(ball){
ball.beginPath();
ball.arc(95,50,100,0,2*Math.PI);
}
window.addEventListener("load",start,false);body{background-color:white;} <canvas id="MyCanvas" width="1000" height="500" style="border:black 1px solid"></canvas>so is there a way to do it with .arc? and if not, any other way to do it? (like border-radius:50%).
Really, ball should contain all the data for... a ball. Instead you set it equal to the canvas:
var ball = document.getElementById("MyCanvas");
...and use ball1 for the context
ball1 = ball.getContext("2d");
Firstly, you should rename those variables to something else.
var canvas, context;
var ball;
function start(){
canvas = document.getElementById("MyCanvas");
context = canvas.getContext("2d");
}
window.addEventListener("load",start,false);
and then you need to think about an animation loop and all sorts of other things...
Perhaps instead you should think about something much simpler like using pure CSS.
.circle{
width: 50px;
height: 50px;
transition: all 1s;
background: yellow;
border-radius: 50%;
cursor: pointer;
}
.circle:hover{
width: 100px;
height: 100px;
}<div class="circle"></div>