Shadow
setSize(512, 512);
gen((x,y) => {
  x -= 256; y -= 256;
  var d = Math.sqrt(x*x + y*y);
  var f = 1 - d / 255;
  return f <= 0 ? [0,0,0,0] : [0,0,0, 150 * (0.5 - 0.5 * Math.cos(Math.PI * f))];
});
scaleSize(1, 0.5);
scaleSize(0.5, 0.5);

Splatter
fill();
context.fillStyle = "rgba(120,0,0,1)";

for (var i = 0; i < 3350; i++) {
  generateSplash();
}

function generateSplash() {
  var cx = 0.9 * (Math.random() * 2 - 1);
  var cy = 0.9 * (Math.random() * 2 - 1);
  var nodes = 16;
  var distance = Math.sqrt(cx * cx + cy * cy);
  if (distance > 1) { return; }
  var size = 0.07 * (1 - (0.5 - 0.5 * Math.cos(Math.PI * distance)) * 0.96);
  for (var i = 0; i < nodes; i++) {
    var ang = 2 * Math.PI * i / nodes + Math.random() * 0.3 - Math.random() * 0.3;
    var dis = size * (1 + 0.5 * Math.random());
    var x = cx + dis * Math.sin(ang);
    var y = cy + dis * Math.cos(ang);
    var d = Math.sqrt(x * x + y * y);
    x = d * d * x;
    y = d * d * y;
    x = 256 + 256 * x;
    y = 256 + 256 * y;
    if (i == 0) {
      context.beginPath();
      context.moveTo(x, y);
    } else {
      context.lineTo(x, y);
    }
  }
  var c = 140 - 60 * Math.random() * Math.random();
  var a = 1 - 0.8 * Math.random();
  context.fillStyle = "rgba(" + c + "," + c + "," + c + ", " +  a + ")";
  context.fill();
}


Upgrade:

setSize(320, 240);
context.setTransform(1, 0, 0, 1, 0, 0);
context.clearRect(0,0,9999,9999);
context.translate(canvas.width / 2, canvas.height / 2 + 20);

var x = 150;
var y = 60;
var h = 120;

context.beginPath();
context.moveTo(-x,y);
context.lineTo(-x,y-h);
context.lineTo(0,-h);
context.lineTo(x,y-h);
context.lineTo(x,y);
context.lineTo(0,0);
context.closePath();

context.fillStyle = "#383838";
//context.fillStyle = "#f0d030";
context.fill();
context.lineWidth = 12;
context.strokeStyle = "black";
context.stroke();

scaleSize(0.5);
scaleSize(0.5);