JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

body { background:#eee }
canvas{ display:block; margin:1em auto; background:#fff }

JavaScript

var c = document.querySelector('canvas'),
    ctx = c.getContext('2d');

c.width = c.height = 400;
ctx.lineWidth   = 12;
ctx.lineCap     = 'round'

ctx.strokeStyle = 'rgba(0,100,0,0.4)';
drawStar(120,120,false);

ctx.strokeStyle = 'rgba(100,0,0,0.4)';
drawStar(270,230,true);

function drawStar(x,y,distinctPaths){
    var lines = [
        [[-100,0],[100,0]],
        [[0,-100],[0,100]],
        [[-70,-70],[70,70]],
        [[70,-70],[-70,70]]
    ];
    ctx.beginPath();
    for (var i=lines.length;i--;){
        var pts = lines[i];
        ctx.moveTo(pts[0][0]+x,pts[0][1]+y);
        ctx.lineTo(pts[1][0]+x,pts[1][1]+y);
        if (distinctPaths){
            ctx.stroke();
            ctx.beginPath();
        }
    }
    if (!distinctPaths) ctx.stroke();
};