CANVAS

Canvas cycle

Cloth

Dibujo

DIBUJANDO EN EL LIENZO

    function iniciar(){

    var elemento= document.getElementById('lienzo');
    lienzo=elemento.getContext('2d');//puede tomar valores 2d y 3d

    var gradiente=lienzo.createLinearGradient(10,10,150,300);//x1,y1,x2,y2

    gradiente.addColorStop(0.3,'#33ccff' );//posición,color
    gradiente.addColorStop(0.8,'#e6b3ff' );

    lienzo.fillStyle   =gradiente;
    lienzo.strokeStyle ="#33ccff";

    lienzo.strokeRect(100,100,120,120);
    lienzo.fillRect  (110,110,100,100);
    lienzo.clearRect (120,120,40,40);
    }

    window.addEventListener("load", iniciar, false);

FIGURAS

   function iniciar(){
    
    var elemento= document.getElementById('lienzo');
    lienzo=elemento.getContext('2d');//puede tomar valores 2d y 3d

    lienzo.beginPath();
    lienzo.moveTo    (100,100);//mueve a pos específica para continuar el trazado
    lienzo.lineTo    (200,200);//linea recta de la anterior a esta
    lienzo.lineTo    (100,200);
    //lienzo.stroke();//trazado
    lienzo.fill();//relleno
}
    window.addEventListener("load", iniciar, false);

Líneas

    function iniciar(){
    var elemento= document.getElementById('lienzo');
    lienzo=elemento.getContext('2d');//puede tomar valores 2d y 3d

    lienzo.beginPath();
    lienzo.moveTo(100,100);//mueve a pos específica para continuar el trazado
    lienzo.lineTo(200,200);//linea recta de la anterior a esta
    lienzo.lineTo(100,200);

    lienzo.clip();//crear máscara con la forma del trazado para seleccionar
    //qué se verá dibujado y qué no

    lienzo.beginPath();
    for (f= 0; f <= 300; f+=10) {
        	lienzo.moveTo(0,f);
        	lienzo.lineTo(500,f);
                }
            lienzo.stroke();
        
}
    window.addEventListener("load", iniciar, false);

Máscara

    
    function iniciar(){

    var elemento= document.getElementById('lienzo');
    lienzo=elemento.getContext('2d');//puede tomar valores 2d y 3d

    lienzo.shadowColor="rgba(0,0,0,0.5)";
    lienzo.shadowOffsetX=4;
    lienzo.shadowOffsetY=4;
    lienzo.shadowBlur=5;
    lienzo.font="bold 24px verdana, sans-serif";
    lienzo.textAlign="start";
    lienzo.fillText("Soy un texto.",50,100);
    
    }

    window.addEventListener("load", iniciar, false);

Texto

    
    function iniciar(){

    var elemento= document.getElementById('lienzo');
    lienzo=elemento.getContext('2d');//puede tomar valores 2d y 3d

    lienzo.font="bold 20px roboto, sans-serif";
    lienzo.fillText("Normal",50,20);
    lienzo.translate (50,70);
    lienzo.rotate    (Math.PI/180*45);
    lienzo.fillText("Rotado",0,0);
    lienzo.rotate(-Math.PI/180*45);
    lienzo.translate(0,100);
    lienzo.scale(2,2);
    lienzo.fillText("Escalado",0,0);
    
    }

    window.addEventListener("load", iniciar, false);

Transformaciones

Imágenes

    
    function iniciar(){

    var elemento= document.getElementById('lienzo');
    lienzo=elemento.getContext('2d');//puede tomar valores 2d y 3d

    var img= new Image();
    img.src="https://www.google.com.co/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";
    img.addEventListener("load", function(){
	lienzo.drawImage(img,0,0,elemento.width, elemento.height)
    }, false);
    
    }

    window.addEventListener("load", iniciar, false);

Title Text