Animation 2

Animation 1

morphx

Photoshop Project

Ronda Rousey

Autoscopy

Somewhere

ART 210 Canvas

 context.beginPath();

 context.rect(0,0,800,600)
 context.fillStyle = "rgba(255,191,191,1)";
 context.fill();

context.closePath()

////// smaller rectangle

context.beginPath();

 context.rect(100,100,200,150)
 context.fillStyle = "rgba(0,191,191,1)";
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = "rgba(0,0,0,1)";
 context.stroke();
 context.closePath();


 ////// smaller rectangle

context.beginPath();

 context.rect(100,100,200,250)
 context.fillStyle = "rgba(255,0,191,0.5)";
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = "rgba(0,0,0,1)";
 context.stroke();
 context.closePath();

 context.beginPath();

 context.rect(100,250,350,250)
 context.fillStyle = "rgba(100,100,185,1)";
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = "rgba(1,1,1,1)";
 context.stroke();
 context.closePath();

 context.beginPath();

 context.rect(150,250,350,300)
 context.fillStyle = "rgba(200,100,201,0.5)";
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = "rgba(0,0,0,1)";
 context.stroke();
 context.closePath();

 context.beginPath();

 context.rect(300,100,200,150)
 context.fillStyle = "rgba(155,70,91,1)";
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = "rgba(2,2,2,1)";
 context.stroke();
 context.closePath();

 context.beginPath();

 context.rect(175,220,310,150)
 context.fillStyle = "rgba(200,0,191,0.5)";
 context.fill();
 context.lineWidth = 5;
 context.strokeStyle = "rgba(0,0,0,1)";
 context.stroke();
 context.closePath();

 context.beginPath();

context.arc(400, 230, 60, 0*Math.PI, 2*Math.PI, false);
context.fillStyle = "rgba(0,255,0,1)";
context.fill();
context.lineWidth = 10;
context.stroke();

context.closePath();

context.beginPath();

context.arc(400, 370, 60, 0*Math.PI, 2*Math.PI, false);
context.fillStyle = "rgba(0,255,0,1)";
context.fill();
context.lineWidth = 10;
context.stroke();

context.closePath();

 var rdg = context.createRadialGradient(400,300,20,400,300,300);
 rdg.addColorStop(0, "black");
 rdg.addColorStop(0.3, "cyan");
 rdg.addColorStop(1, "red");

context.beginPath();
context.moveTo(100,300);
context.bezierCurveTo(100,0,700,600,700,300);
context.bezierCurveTo(700,0,100,600,100,300);
context.fillStyle = rdg;
context.fill();
context.stroke();
context.closePath();


 context.beginPath();
context.moveTo(100,300);
context.quadraticCurveTo(400,0,700,300);
context.quadraticCurveTo(400,600,100,300);
context.fillStyle = "rgba(255,255,42,0.25)";
context.fill();
context.stroke();
context.closePath();


 context.beginPath();

context.arc(400, 300, 60, 0*Math.PI, 2*Math.PI, false);
context.fillStyle = "rgba(255,0,0,0.5)";
context.fill();
context.lineWidth = 10;
context.stroke();

context.closePath();



context.beginPath();
context.moveTo(50,500);
context.quadraticCurveTo(400,0,700,300);
context.strokeStyle = "red";
context.stroke();
context.closePath();

 context.beginPath();
context.moveTo(50,650);
context.quadraticCurveTo(400,0,700,300);
context.stroke();
context.closePath();

  context.beginPath();
context.moveTo(50,1450);
context.quadraticCurveTo(400,0,700,300);
context.stroke();
context.closePath();

   context.beginPath();
context.moveTo(50,2500);
context.quadraticCurveTo(400,0,700,300);
context.stroke();
context.closePath();