Ejemplo de código JavaScript que utiliza el elemento canvas de HTML para dibujar

Aquí te dejo un ejemplo de código JavaScript que utiliza el elemento canvas de HTML para dibujar una fila de 3 círculos medianos con colores aleatorios: ```javascript // Obtener el elemento canvas y su contexto var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // Establecer el color de fondo del canvas canvas.style.backgroundColor = "#B71C1C"; // Definir los colores disponibles var colores = ["#00FF00", "#FF0000", "#FFFF00", "#EE82EE", "#0000FF", "#000000", "#808080", "#FFFFFF"]; // Dibujar los círculos for (var i = 0; i < 3; i++) { // Generar un índice aleatorio para seleccionar un color de la lista var indiceColor = Math.floor(Math.random() * colores.length); // Establecer el color actual del contexto ctx.fillStyle = colores[indiceColor]; // Dibujar el círculo en la posición correspondiente ctx.beginPath(); ctx.arc(50 + i * 100, 50, 40, 0, 2 * Math.PI); ctx.fill(); } ``` En este ejemplo, se define un array `colores` con los colores disponibles. Luego, se utiliza un bucle `for` para dibujar los tres círculos. En cada iteración del bucle, se genera un índice aleatorio para seleccionar un color de la lista. El color se establece en el contexto utilizando `ctx.fillStyle`, y luego se dibuja el círculo utilizando `ctx.beginPath()` y `ctx.arc()`. Finalmente, se llama a `ctx.fill()` para rellenar el círculo con el color seleccionado. Recuerda que necesitarás un elemento canvas en tu HTML con el id "myCanvas" para que este código funcione correctamente. Puedes ajustar los tamaños y las posiciones de los círculos modificando los valores utilizados en `ctx.arc()`.