Blogging by Breanne: January 2016

Wednesday, January 27, 2016

Rect/Arc HTML Code

<!doctype html>

<html>

<head>

<title> ART 210 - CANVAS PROJECT </title>

body,td,th {

font-family: Helvetica, Arial, sans-serif;

font-size: 12px;

color: rgba(0,0,0,1);

}

body {

background-color: rgba(255,255,255,1);

}

#myCanvas { border: rgba(102,0,255,1) medium dashed; }

</style>

</head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//RECTANGLE 1

context.beginPath();

context.rect(60,60,140,100);

context.fillStyle = 'rgba(168,0,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//RECTANGLE 2

context.beginPath();

context.rect(320,100,160,100);

context.fillStyle = 'rgba(255,128,136,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//RECTANGLE 3

context.beginPath();

context.rect(600,60,140,100);

context.fillStyle = 'rgba(168,0,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//RECTANGLE 4

context.beginPath();

context.rect(60,440,140,100);

context.fillStyle = 'rgba(168,0,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//RECTANGLE 5

context.beginPath();

context.rect(320,400,160,100);

context.fillStyle = 'rgba(255,128,136,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//RECTANGLE 6

context.beginPath();

context.rect(600,440,140,100);

context.fillStyle = 'rgba(168,0,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//CIRCLE 1

context.beginPath();

context.arc(400,300,120,0*Math.PI,2*Math.PI,false);

context.fillStyle = 'rgba(32,0,247,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//CIRCLE 2

context.beginPath();

context.arc(260,130,80,0*Math.PI,2*Math.PI,false);

context.fillStyle = 'rgba(255,121,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//CIRCLE 3

context.beginPath();

context.arc(540,130,80,0*Math.PI,2*Math.PI,false);

context.fillStyle = 'rgba(255,121,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//CIRCLE 4

context.beginPath();

context.arc(260,470,80,0*Math.PI,2*Math.PI,false);

context.fillStyle = 'rgba(255,121,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//CIRCLE 5

context.beginPath();

context.arc(540,470,80,0*Math.PI,2*Math.PI,false);

context.fillStyle = 'rgba(255,121,255,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//ARC 1

context.beginPath();

context.arc(0,300,100,0.5*Math.PI,1.5*Math.PI,true);

context.fillStyle = 'rgba(32,0,247,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//ARC 2

context.beginPath();

context.arc(800,300,100,0.5*Math.PI,1.5*Math.PI,false);

context.fillStyle = 'rgba(32,0,247,0.5)';

context.fill();

context.strokeStyle = 'rgba(0,0,0,1)';

context.lineWidth = 5;

context.stroke();

context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS

context.beginPath();

context.font = 'bold 20px Arial';

context.fillStyle = "rgba(0,0,0,1)";

context.fillText('ART 210 - CANVAS PROJECT', 20, 550);

context.closePath();

</script>

</body>

</html>

Tuesday, January 26, 2016

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> ART 210 - CANVAS PROJECT </title>
<style type="text/css">

body,td,th {
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: rgba(0,0,0,1);
}

body {
background-color: rgba(255,255,255,1);
}

#myCanvas { border: rgba(102,0,255,1) medium dashed; }

</style>

</head>

<body>

<canvas id="myCanvas" width="800" height="600"></canvas>

<script>

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

//// >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> YOUR CODE STARTS HERE

//TRIANGLE 1

context.beginPath();

context.moveTo(100,100); //STARTING POINT
context.lineTo(100,500);
context.lineTo(500,500);
context.lineTo(100,100); //ENDING POINT

context.lineWidth = 20;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(219,104,219,0.5)';
context.fillStyle = 'rgba(0,255,255,0.25)';

context.fill();
context.stroke();

context.closePath();

//TRIANGLE 2

context.beginPath();

context.moveTo(300,100); //STARTING POINT
context.lineTo(700,100);
context.lineTo(700,500);
context.lineTo(300,100); //ENDING POINT

context.lineWidth = 20;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(0,225,255,0.5)';
context.fillStyle = 'rgba(219,104,219,0.25)';

context.stroke();
context.fill();

context.closePath();

//TRIANGLE 3

context.beginPath();

context.moveTo(250,550); //STARTING POINT
context.lineTo(400,250);
context.lineTo(550,550);
context.lineTo(250,550); //ENDING POINT

context.lineWidth = 10;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(255,0,155,0.5)';
context.fillStyle = 'rgba(138,0,138,0.25)';

context.stroke();
context.fill();

context.closePath();

//TRIANGLE 4

context.beginPath();

context.moveTo(250,50); //STARTING POINT
context.lineTo(550,50);
context.lineTo(400,350);
context.lineTo(250,50); //ENDING POINT

context.lineWidth = 10;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(138,0,138,0.5)';
context.fillStyle = 'rgba(255,0,155,0.25)';

context.stroke();
context.fill();

context.closePath();

//TRIANGLE 5

context.beginPath();

context.moveTo(600,550); //STARTING POINT
context.lineTo(600,350);
context.lineTo(750,350);
context.lineTo(600,550); //ENDING POINT

context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(255,162,0,0.5)';
context.fillStyle = 'rgba(255,255,0,0.25)';

context.stroke();
context.fill();

context.closePath();

//TRIANGLE 6

context.beginPath();

context.moveTo(50,250); //STARTING POINT
context.lineTo(200,50);
context.lineTo(200,250);
context.lineTo(50,250); //ENDING POINT

context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(255,255,0,0.5)';
context.fillStyle = 'rgba(255,162,0,0.25)';

context.stroke();
context.fill();

context.closePath();

//TRIANGLE 7

context.beginPath();

context.moveTo(50,550); //STARTIN POINT
context.lineTo(50,400);
context.lineTo(200,550);
context.lineTo(50,550); //ENDING POINT

context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(111,210,0,0.5)';
context.fillStyle = 'rgba(111,210,189,0.25)';

context.stroke();
context.fill();

context.closePath();

//TRAINGLE 8

context.beginPath();

context.moveTo(600,50); //STARTING POINT
context.lineTo(750,50);
context.lineTo(750,200);
context.lineTo(600,50); //ENDING POINT

context.lineWidth = 5;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(111,210,189,0.5)';
context.fillStyle = 'rgba(111,210,0,0.25)';

context.stroke();
context.fill();

context.closePath();

//TRIANGLE 9

context.beginPath();

context.moveTo(50,50); //STARTING POINT
context.lineTo(100,50);
context.lineTo(50,100);
context.lineTo(50,50); //ENDING POINT

context.lineWidth = 3;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(117,0,255,1)';
context.fillStyle = 'rgba(255,0,106,1)';

context.stroke();
context.fill();

context.closePath();

//TRIANGLE 10

context.beginPath();

context.moveTo(700,550); //STARTING POINT
context.lineTo(750,550);
context.lineTo(750,500);
context.lineTo(700,550); //ENDING POINT

context.lineWidth = 3;
context.lineCap = 'round';
context.lineJoin = 'round';

context.strokeStyle = 'rgba(255,0,106,1)';
context.fillStyle = 'rgba(117,0,255,1)';

context.stroke();
context.fill();

context.closePath();

//// <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< YOUR CODE ENDS HERE

// CHANGE THE CREDITS

context.beginPath();
context.font = 'bold 20px Arial';
context.fillStyle = "rgba(0,0,0,1)";
context.fillText('ART 210 - CANVAS PROJECT', 20, 550);
context.closePath();

</script>

</body>
</html>

Wednesday, January 27, 2016

Rect/Arc HTML Code

Tuesday, January 26, 2016

Triangle HTML Code