Javascript animated gradients don't show up

I know it’s pretty stupid, but I really don’t know why it does not work. I’m looking to make animated gradients like here: https://codepen.io/desandro/pen/BzJkQv.
I’ve copied exactly all the lines, but it’s still white background. I’ve put everything in just a HTML script, here it is:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
<!--<link href="home_css.css" rel="stylesheet" type="text/css">-->
<style>
    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      transform: scale(2);
    }   
</style>
<script>
window.onload = function () {
    function Pixel(x, y) {
        this.x = x;
        this.y = y;
        this.hue = Math.floor(Math.random() * 360);
        var direction = Math.random() > 0.5 ? -1 : 1;
        this.velocity = (Math.random() * 30 + 20) * 0.01 * direction;
    }
    Pixel.prototype.update = function () {
        this.hue += this.velocity;
    };
    Pixel.prototype.render = function (ctx) {
        var hue = Math.round(this.hue);
        ctx.fillStyle = "hsl(" + hue + ", 100%, 50% )";
        ctx.fillRect(this.x, this.y, 1, 1);
    };
    function animate() {
        pixels.forEach(function (pixel) {
            pixel.update();
            pixel.render(ctx);
        });
        requestAnimationFrame(animate);
    }

    var pixels = [new Pixel(0, 0), new Pixel(1, 0), new Pixel(0, 1), new Pixel(1, 1)];

    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    animate();
}
</script>
</head>
<body> 
    <canvas width="2" height="2"></canvas>
    <!--
    <div class="login">
      <h1 id="login_title">Login</h1>
        <form method="post">
          <input type="text" name="u" placeholder="Username" required="required" />
            <input type="password" name="p" placeholder="Password" required="required" />
            <button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
        </form>
    </div>
    -->
</body>
</html>

This is exactly my current code.
Could you please help me? If you need any more information, feel free to ask! 🙂

13 thoughts on “Javascript animated gradients don't show up”

  1. I was suggested this web site by my cousin. I am not sure whether this post is
    written by him as nobody else know such detailed about my difficulty.
    You are amazing! Thanks!

    Reply
  2. Hello there, just became aware of your blog through
    Google, and found that it’s really informative.
    I’m gonna watch out for brussels. I’ll appreciate if you continue this in future.

    Lots of people will be benefited from your writing.
    Cheers!

    Reply
  3. You really make it seem really easy together with your presentation however I in finding this matter to be actually something which I think I might by no means understand.
    It seems too complex and very vast for me. I’m having a look ahead in your next
    submit, I will attempt to get the hang of it!

    Reply
  4. 796279 45522Youre so cool! I dont suppose Ive learn anything like this before. So good to uncover any person with some authentic thoughts on this subject. realy thank you for starting this up. this site is something that is wanted on the internet, someone with a bit bit originality. beneficial job for bringing something new to the internet! 429218

    Reply

Leave a Comment