How can you make a snowflake shape rotate to its center, with canvas and JavaScript?

I am trying to create a script that emulates snowing using a snowflake shape that rotates in its center as it falls.

The problem is that trying ctx.rotate(), rotates all the snowflakes in the center of the canvas and not to each individual flake to its center.
The code.

    (function() {
        window.requestAnimationFrame = requestAnimationFrame;
    })();
    var flakes = [],
        c = document.getElementById('canvas'),
        ctx = c.getContext("2d"),
        flakeCount = 100
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    init();

    function init() {
        for (var i = 0; i < flakeCount; i++) {
            var x = Math.floor(Math.random() * canvas.width),
                y = Math.floor(Math.random() * canvas.height),
                speed = (Math.random() * 1) + 0.5
            img = draw();
            flakes.push({
                img: img,
                velY: speed,
                velX: 0,
                x: x,
                y: y,
                color: getRandomColor()
            });
        }
        snow();
    }
    function snow() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (var i = 0; i < flakeCount; i++) {
            var flake = flakes[i]
            flake.y += flake.velY;
            flake.x += flake.velX+getRand(0.1,0.3);
            if (flake.y >= canvas.height || flake.y <= 0) {
                reset(flake);
            }
            if (flake.x >= canvas.width || flake.x <= 0) {
                reset(flake);
            }
            ctx.filter = flake.color;
            ctx.drawImage(flake.img, flake.x, flake.y)
        }
        requestAnimationFrame(snow);
    };
    function reset(flake) {
        flake.x = Math.floor(Math.random() * canvas.width);
        flake.y = 0;
        flake.speed = (Math.random() * 1) + 0.5;
        flake.velY = flake.speed;
        flake.velX = 0;
        flake.color = getRandomColor()
    }
    function draw() {
        let c = document.createElement('canvas');
        var canvas = c;
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        if (canvas.getContext) {
            var context = canvas.getContext('2d');
            var width = canvas.width;
            var height = canvas.height;
            context.lineWidth = 20;
            context.lineCap = 'round';
            context.fillStyle = "rgba(255, 255, 255, 0.0)";
            context.strokeStyle = "#FFFFFF";
            context.fillRect(0,0,width,height);
            context.scale(0.1, 0.1)
            context.translate(width/2,height/2);
            for(var count = 0; count < 6; count++) {
                context.save();     
                drawSegment(context, 100, 40);
                drawSegment(context, 100, 80);
                drawSegment(context, 100, 0);
                context.restore();          
                context.rotate(Math.PI/3);
            }
        }
        return canvas;
    }
    function drawSegment(context, segmentLength, branchLength) {
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(segmentLength,0);
        context.stroke();
        context.translate(segmentLength,0);
        if (branchLength > 0) {
            drawBranch(context, branchLength, 1);
            drawBranch(context, branchLength, -1);
        }
    }
    function drawBranch(context, branchLength, direction) {
        context.save();
        context.rotate(direction*Math.PI/3);
        context.moveTo(0,0);
        context.lineTo(branchLength,0);
        context.stroke();
        context.restore();
    }

In the following JSFiddle you can find the code
https://jsfiddle.net/hkz3nyfL/7/

(You will notice that the shape appears broken on the top side, i dont know why it does that, it happens because the screen is too small)

Thanks in advance

15 thoughts on “How can you make a snowflake shape rotate to its center, with canvas and JavaScript?”

  1. It is perfect time to make some plans for the long run and it
    is time to be happy. I have read this publish
    and if I may I want to counsel you few interesting things or tips.
    Perhaps you could write next articles referring to this article.
    I desire to learn more issues approximately it!

    Reply

Leave a Comment