Canvas Octopus

For https://www.reddit.com/r/RandomActsOfGaming/comments/y5b5tq/horizon_forbidden_west_ps4ps5_code_giveaway/

by Anton

HTML

<canvas width="300" height="300"></canvas>

CSS

canvas {
    border: solid 1px darkgrey;
}

JavaScript

let canvas = document.querySelector("canvas");
let cx = canvas.getContext("2d");
cx.beginPath();

// head
cx.arc(150, 120, 40, 0, 7);
cx.moveTo(137, 120); // Eye L
cx.arc(130, 120, 7, 0, 7);
cx.moveTo(177, 120); // Eye R
cx.arc(170, 120, 7, 0, 7);
cx.moveTo(185, 120); // Smile
cx.arc(150, 120, 35, 0, Math.PI / 2);

// Legs
cx.moveTo(115, 139); // Leg L1
cx.arc(75, 160, 40, 0, Math.PI / 2);
cx.moveTo(125, 151); // Leg L2
cx.arc(85, 180, 40, 0, Math.PI / 2);
cx.moveTo(135, 157); // Leg L3
cx.arc(95, 200, 40, 0, Math.PI / 2);
cx.moveTo(145, 160); // Leg L4
cx.arc(105, 220, 40, 0, Math.PI / 2);

cx.moveTo(185, 139); // Leg R1
cx.arc(225, 160, 40, Math.PI, Math.PI / 2, true);
cx.moveTo(175, 151); // Leg R2
cx.arc(215, 180, 40, Math.PI, Math.PI / 2, true);
cx.moveTo(165, 157); // Leg R3
cx.arc(205, 200, 40, Math.PI, Math.PI / 2, true);
cx.moveTo(155, 160); // Leg R4
cx.arc(195, 220, 40, Math.PI, Math.PI / 2, true);

// Bubbles
for(let i = 0; i < 100; i++) {
	const r = Math.random() * 5 + 2,
  	posR = Math.random() * 90 + 130,
  	posAngle = Math.random() * 2 * Math.PI,
  	posX = 150 + posR * Math.cos(posAngle),
  	posY = 150 + posR * Math.sin(posAngle);
 	cx.moveTo(posX + r, posY);
  cx.arc(posX, posY, r, 0, 7);
}

cx.stroke();