JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='cnv' width='500px' height='500px'>
    Você não tem canvas :(
</canvas>

CSS

* {
    margin: 0;
    padding: 0;
}

#cnv {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
}

JavaScript

/* Acessando canvas */
var elem = document.getElementById('cnv');
if (!elem || !elem.getContext) {
    return;
}

var c = elem.getContext('2d');
if (!c) {
    return;
}

var cw = 500;
var ch = 500;

var w = 300;
var h = 400;

var angulo = 0,variacao=0;

var neve = new Array(),l;

function render(){
c.beginPath();
var lingrad = c.createLinearGradient(0, 0, cw, ch);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(1, '#fff');
c.fillStyle = lingrad;
c.fillRect(0, 0, ch, cw);
c.fill();
c.closePath();


c.beginPath();
c.fillStyle = 'brown';
c.fillRect(210, 400, 80, 100);
c.fill();
c.closePath();

/* 'Folhas' da árvore */
var grad = c.createLinearGradient(0, 0, 0, h);
grad.addColorStop(0, '#0f0');
grad.addColorStop(1, '#070');
c.fillStyle = grad;
c.shadowBlur = 10+Math.sin(variacao)*3;
c.shadowColor = '#FF0';


var pi = Math.PI;

c.beginPath();
c.moveTo(cw / 2, ch - 270);
c.arc(cw / 2, ch - 270, 200, pi / 4, 3 * pi / 4, false);
c.closePath();
c.fill();

c.beginPath();
c.moveTo(cw / 2, ch - 360);
c.arc(cw / 2, ch - 360, 180, pi / 4, 3 * pi / 4, false);
c.closePath();
c.fill();

c.beginPath();
c.moveTo(cw / 2, ch - 420);
c.arc(cw / 2, ch - 420, 140, pi / 4, 3 * pi / 4, false);
c.closePath();
c.fill();



/* Estrela */
grad = c.createRadialGradient(cw / 2, ch - 420, 0, cw / 2, ch - 420, 40+Math.sin(variacao)*10);
grad.addColorStop(0, 'white');
grad.addColorStop(0.9, '#FF4');
grad.addColorStop(1, '#FF0');

c.fillStyle = grad;
c.beginPath();
c.moveTo(cw / 2, ch - 420);
var p = getPoints(50, 5,angulo);
c.moveTo(cw / 2 + p[0][0], ch - 420 + p[0][1]);
c.lineTo(cw / 2 + p[2][0], ch - 420 + p[2][1]);
c.lineTo(cw / 2 + p[4][0], ch - 420 + p[4][1]);
c.lineTo(cw / 2 + p[1][0], ch - 420 + p[1][1]);
c.lineTo(cw / 2 + p[3][0], ch - 420 + p[3][1]);
c.closePath();
c.fill();


/* Pontos das bolinhas */

var x = [
    [250, 400],
    [190, 350],
    [310, 350],
    [120, 370],
    [380, 370],

    [250, 295],
    [200, 245],
    [300, 245],
    [135, 265],
    [365, 265],

   ...