jquery canvas animation with circle fill with text

Question

I am trying to write a code of bubble animation using jquery and html, to make my circles moving in the canvas and the text should resize according to circle size.

How can I put the text on these circles?

I am using fill text in the circle function but this gives me an error.

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = 300;
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e){
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
function Circle(){
this.radius = getRandomInt(30);
this.originalSize = this.radius;
this.x = Math.random() * (innerWidth - this.radius * 2) + this.radius;
this.y = Math.random() * (innerHeight - this.radius * 2) + this.radius;
this.gradient = Math.random();
this.color = 'rgba('+ getRandomInt(255) +','+ getRandomInt(255) + ','+ getRandomInt(255) + ','+ this.gradient +')';    
this.xVelocity = 5 * (Math.random() - Math.random());
this.yVelocity = 5 * (Math.random() - Math.random());
this.draw = function(){
c.beginPath();
c.arc(this.x,this.y, this.radius, 0, Math.PI*2, false);
c.strokeStyle = this.color;
c.stroke();
c.fillStyle = this.color;
c.fill();
this.update();
}
this.update = function(){
if(this.x + this.radius > innerWidth || this.x - this.radius < 0){
this.xVelocity = -this.xVelocity;
}
if(this.y + this.radius > innerHeight || this.y - this.radius < 0){
this.yVelocity = -this.yVelocity;
}
this.x += this.xVelocity;
this.y += this.yVelocity;
if(mouse.x - this.x < 50 && mouse.x - this.x > -50 
                && mouse.y - this.y < 50 && mouse.y - this.y > -50){
if(this.radius < 150){
this.radius += 2;
}
}
else if(this.radius !== this.originalSize){
this.radius -= 2;
}
}
}
var circleArray = [];
for(var i = 0; i < 100; i++){
circleArray.push(new Circle());
}
function animate(){
c.clearRect(0,0, innerWidth, innerHeight);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].draw();
}
requestAnimationFrame(animate);
}
animate();

<canvas class="grey darken-4" id="canvas" width="" height="">
</canvas>

Answer 1

I hope I understood you correctly. I've added a text array var textRy=["C", "C++", "JS", "java"]; and the circle has now a this.text property. To write the text I've added a few lines to the this.draw method but you can put it all in a separate function. I've made the size of the text relative to this.radius.

var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;//300;

var textRy=["C", "C++", "JS", "java"];
 
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove', function(e){
mouse.x = e.x;
mouse.y = e.y;
});
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}



function Circle(){
this.radius = getRandomInt(30);
this.originalSize = this.radius;
this.x = Math.random() * (innerWidth - this.radius * 2) + this.radius;
this.y = Math.random() * (innerHeight - this.radius * 2) + this.radius;
  
this.text = textRy[~~(Math.random() * textRy.length)];
  
this.gradient = Math.random();
this.color = 'rgba('+ getRandomInt(255) +','+ getRandomInt(255) + ','+ getRandomInt(255) + ','+ this.gradient +')';    
this.xVelocity = 5 * (Math.random() - Math.random());
this.yVelocity = 5 * (Math.random() - Math.random());
this.draw = function(){
c.beginPath();
c.arc(this.x,this.y, this.radius, 0, Math.PI*2, false);
c.strokeStyle = this.color;
c.stroke();
c.fillStyle = this.color;
c.fill();

 
c.textAlign="center";
c.textBaseline="middle";
c.font=(this.radius*.8)+"px Consolas";
c.fillStyle = "blue";
c.fillText(this.text,this.x,this.y);
      
  
this.update();
}
this.update = function(){
if(this.x + this.radius > innerWidth || this.x - this.radius < 0){
this.xVelocity = -this.xVelocity;
}
if(this.y + this.radius > innerHeight || this.y - this.radius < 0){
this.yVelocity = -this.yVelocity;
}
this.x += this.xVelocity;
this.y += this.yVelocity;
if(mouse.x - this.x < 50 && mouse.x - this.x > -50 
                && mouse.y - this.y < 50 && mouse.y - this.y > -50){
if(this.radius < 150){
this.radius += 2;
}
}
else if(this.radius !== this.originalSize){
this.radius -= 2;
}
}
}
var circleArray = [];
for(var i = 0; i < 100; i++){
circleArray.push(new Circle());
}
function animate(){
c.clearRect(0,0, innerWidth, innerHeight);
for(var i = 0; i < circleArray.length; i++){
circleArray[i].draw();
}
requestAnimationFrame(animate);
}
animate();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>