This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Animate Your Name Forum

View Course

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
over 3 years ago

Can I resize the animation?

If you want to use this animation in your own project then the predefined size (500px x 1000px) might be unsuitable.

To resize the animation (canvas element in fact) you have to change only one part of bubbles.js:

function updateCanvasDimensions() {
    canvas.attr({
        // change height and width to desired value
        height: 500,
        width: 1000
    });
    canvasWidth = canvas.width();
    canvasHeight = canvas.height();

    draw();
}

Return to Frequently Asked Questions


1 vote

permalink

How do I put the bubbles.js file in my website? I am using TextWrangler.

814 points
53c0892f9c4e9db1960004c9_394357994
Submitted by
Jackson
over 2 years ago


0 votes

permalink

where do you put this

312 points
54359a0c282ae324af000549_98722454
Submitted by
Adam Paylor
over 2 years ago

2 Comments

571828824b7f51f26c000619_875219903 Maciej Wiercioch over 2 years ago

This is part of bubbles.js file (http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js). To resize canvas you have to change values in lines 159 - 160 :)

18f5352296c86bc33dc01181c80d91e0?s=140&d=retro Pranjal Jain over 2 years ago

How to make it in %? I want to do it 100% width and 100% height