How to make Bounce Bubble responsive?

#1

https://www.codecademy.com/courses/welcome-to-codecademy/lessons/welcome-to-codecademy/exercises/change-physics?action=resume_content_item

Doing this excersise I tried to put it on a website https://www.helpthekids.co.uk/Xmas
It is meant to say Happy Christmas
but says appy Christma
It has been somwhat successful, however it seams to be cut off and I can’t figure out why? How do I get this to be full screen and responsive?

#2

If you post your code, we’ll be able to help you :slight_smile:

#3

HTML

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
    <script type="text/javascript" src="main.js"></script>
  </body>
</body>
</html>

Main.js

// Define color variables:
red = [0, 100, 63];
orange = [40, 100, 60];
green = [75, 100, 40];
blue = [196, 77, 55];
purple = [280, 50, 60];
letterColors = [red, orange, green, blue, purple];

// This variable controls the smallest distance at which a mouse will make the dots react
mouseResponseThreshold = 45;

// This variable controls how strongly the dots will try to return to their starting position
friction = 0.25;

// This variable controls how much the dots will rotate when interacting
rotationForce = 0.3;
message = 'Change the physics!';
drawName(message, letterColors);
bounceBubbles();