My Coded Shapes and Lines

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ
//Simple line

context.beginPath(); // hey im about to draw something
context.lineWidth = 10; // declare the width in pixels of the line
context.moveTo(200,400); // move to starting coordinates
context.lineTo(700,600); // draw line to following point coordinates
context.lineTo(500,200); // draw line to following point coordinates
context.lineTo(300,400); // draw line to following point coordinates
context.lineTo(100,200); // draw line to following point coordinates
context.lineTo(600,300); // draw line to following point coordinates
context.strokeStyle = "rgb(0,256,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();




//RECTANGLE

context.beginPath(); // hey im about to draw something
context.lineWidth = 10; // declare the width in pixels of the line
context.rect(300, 400, 200, 200); // top left corner x and y coordinates, width and height
context.strokeStyle = "rgb(256,0,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.stroke();
// for a square width = height , the width and the height have the same value



//Arc

context.beginPath(); // hey im about to draw something
context.lineWidth = 10; // declare the width in pixels of the line
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate

// radius of the tracing circle

var radius = 100;

// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;

// draw the arc clockwise or counterclockwise

var counterClockwise = true; // if set to true it draws the complimentary arc

// draw the arc
context.strokeStyle = "rgb(256,0,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.stroke();
// for a square width = height , the width and the height have the same value

//Arc

context.beginPath(); // hey im about to draw something
context.lineWidth = 10; // declare the width in pixels of the line
// x and y coordinates of the tracing circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate

// radius of the tracing circle

var radius = 100;

// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;

// draw the arc clockwise or counterclockwise

var counterClockwise = false; // if set to true it draws the complimentary arc

// draw the arc
context.strokeStyle = "rgb(256,0,0)"; // or "#FF0000" // declare the line color in rgb or hexadecimal values
context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);
context.stroke();
// for a square width = height , the width and the height have the same value

//Full Color

// You need a closed shape in order to fill with a full color

// define the filling color

context.fillStyle = 'rgb(255,25,129)'; // or '#FF0388'

// give the command to fill the SHAPE



//Full circle

// x and y coordinates of the circle
var circlecenterX = canvas.width / 2; // x coordinate
var circlecenterY = canvas.height / 2; // y coordinate

// radius of the circle

var radius = 100;

// Math.PI is HALF the circle, 2*Math.PI is the full circle
// use a number between 0 and 2 to declare the starting and ending angle

var startAngle = 0; // start at the angle 0
var endAngle = 2 * Math.PI; // end at the full angle

// draw the arc clockwise or counterclockwise

var counterClockwise = false; // in this case it doesn't really matter unless you are drawing half a circle

// draw the arc

context.arc(circlecenterX, circlecenterY, radius, startAngle, endAngle, counterClockwise);



//curve

// starting point coordinates
var startX = 0;
var startY = canvas.height/2;

// control point coordinates ( magnet )
var cpointX = canvas.width / 2;
var cpointY = canvas.height / 2 + 200;

// ending point coordinates
var endX = canvas.width;
var endY = canvas.height/2;


context.beginPath();
context.moveTo(startX, startY);
context.quadraticCurveTo(cpointX, cpointY, endX, endY);

context.lineWidth = 5;
context.strokeStyle = "rgb(0,125,255)";
context.stroke();



 //beziar curve
context.moveTo(100, 400);
context.bezierCurveTo(300, 300, 200, 200, 200,300);

context.stroke();


//Radial Gradient - example

context.beginPath(); // hey im about to draw something
context.lineWidth = 10; // declare the width in pixels of the line
// the radial gradient requires a shape, in this case a rectangle that fills the entire canvas
context.rect(0,0, 200., 200.);

// inner circle
var circ1X = 10;
var circ1Y = 10;
var circ1Radius = 100;

// outer circle
var circ2X = 10;
var circ2Y = 10;
var circ2Radius = 200;
// create radial gradient
var grd = context.createRadialGradient(20, 40, 30, 70, 50, 100);
// inner color
grd.addColorStop(0, "rgb(255,0,0)");

// you can add intermediate colors using N greater than 0 and smaller then 1
var N = 0.5;
grd.addColorStop(N, "rgb(0,0,255)");

// outer color
grd.addColorStop(1, "rgb(0,255,0)");

context.fillStyle = grd;
context.fill();

//Repeat loops

for (var i=0; i<canvas.height; i+=20) {

context.beginPath();

context.lineWidth = i/100;

context.strokeStyle = "rgb("+i+",100,200)";

context.moveTo(0, 0);

context.lineTo(canvas.width, i);

context.stroke();

}


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

New to Blogging

Hey, what is good. My name is Brandon Heir and i'm attending The University of Tampa this year as my first year of college. I love to go out during the nights here and have a good time with my friends. One of my favorite things to do is listen and play music. Ive played drums for 8 years, new to guitar but learning more about it and I also know how to play the ukelele. Im a very nice and down to earth person so stay tuned for more updates on me. The first class this semester for this digital arts class went well and I enjoyed it. Im excited to see how the semester goes and hopefully I end up doing well!
Read more