Practicando un poco con CANVAS - insertando imágen de escudo en bandera.

Saludos a todos,

Como práctica a lo visto con CANVAS, hice un programa para generar la bandera y escudo de mi país Ecuador, se usaron los mismos elementos vistos en el aula y también un poco de investigación para cargar una imagen en canvas, en este caso inserté el escudo sobre la bandera.

El código y resultado ha sido el siguiente:

<meta charset="utf-8">

<meta charset="utf-8">

<h1>Dibujando bandera de Ecuador</h1>

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


</body>

</canvas>

<script type="text/javascript">


    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    //Dibujando rectángulo grande
    pincel.fillStyle = "yellow";
    pincel.fillRect(0,0,400,800);

    //dibuando rectángulo azul
    pincel.fillStyle = "blue";
    pincel.fillRect(0,120,400,100);

    //dibuando rectángulo rojo
    pincel.fillStyle = "red";
    pincel.fillRect(0,200,400,100);

    var img = new Image(); //definimos el objeto de tipo imagen

    //defino la dirección donde se encuentr la imagen, puede ser local o desde internet como este caso,

    img.src = "https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco,dpr_1/tvcbjtk5kemj1e0w3ont";


    //función para cargar imagen 

    img.onload = function(){
          pincel.drawImage(img, 80, 40, 200, 200); //los atributos que he utilizado son: nombreimagen, posición X, posición Y, ancho, altura
    }


</script>