CODEWITHSUNDEEP
javascripthtmlcanvas
Anthony Ghosn
Anthony Ghosn

Reputation: 82

how can I make balls resize automatically using .arc

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%).

Upvotes: 1

Views: 73

Answers (1)

Djave
Djave

Reputation: 9329

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>

Upvotes: 1

Related Questions