<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Osos</title>
</head>
<body>
<canvas width="1000" height="800"></canvas>
</body>
</html>
<script>
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightpink";
pincel.fillRect(0,0,1000,800);
function dibujarCirculo(x,y,radio,color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x,y,radio,0,2*3.14);
pincel.fill();
};
for (var x = 0; x < 900; x = x + 110) {
for (var y = 0; y < 700; y = y +110) {
dibujarCirculo(30+x,25+y,20,"peru");
dibujarCirculo(90+x,25+y,20,"peru");
dibujarCirculo(60+x,60+y,50,"peru");
};
};
</script>
