<canvas width="600px" height="400px"></canvas>
<script>
let pantalla = document.querySelector("canvas");
let pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightblue";
pincel.fillRect(0,0,600,133);
pincel.fillStyle = "white";
pincel.fillRect(0,133,600,133);
pincel.fillStyle = "lightblue";
pincel.fillRect(0,266,600,133);
pincel.strokeStyle = "yellow"
pincel.moveTo(300,200);
pincel.lineTo(300,290); //Abajo
pincel.moveTo(300,200);
pincel.lineTo(300,110); //Arriba
pincel.moveTo(300,200);
pincel.lineTo(200,200); //izquierda
pincel.moveTo(300,200);
pincel.lineTo(400,200); //Derecha
pincel.moveTo(300,200);
pincel.lineTo(365,265); //Diagonal abajo derecha
pincel.moveTo(300,200);
pincel.lineTo(235,265); //Diagonal abajo izquierda
pincel.moveTo(300,200);
pincel.lineTo(215,135); //Diagonal arriba izquierda
pincel.moveTo(300,200);
pincel.lineTo(365,135); //Diagonal arriba derecha
pincel.stroke();
pincel.fillStyle = "yellow";
pincel.beginPath();
pincel.arc(300, 200, 50, 0, 2*3.14);
pincel.fill();
</script>