How to use a random letter in this JavaScript animation?

Question

I am working on this animation , where when hovering over the text, it animates in a beautiful manner.

But I want a change in this animation. I want to use a random character instead of circle eg a unicode birthday cake symbol .

The problem is I can't find the definition of circle anywhere in the bubbles.js file, looks like it circle is defined somewhere inside jQuery file.

Answer 1

In bubbles.js, the shapes are drawn in the function that starts with the line:

this.draw = function (bubbleShape, dx, dy) {

Here is an article that shows how to add triangles and hearts.

If you want to draw a character, you have to reference a font that supports that character, and the browser would have to have that font.

You could try:

ctx.fillStyle = this.color;
ctx.font = '40pt Symbola';
ctx.fillText('🎂', this.curPos.x + dx, this.curPos.y + dy);

You might be better off creating an image of a birthday cake, and then drawing the image: