Assignment 1: Canvas Object experiment

Dear Blog, 

My first assignment was to experiment with coding canvas shapes on dreamweaver (super cool and confusing program) and this was my result... Lets just call it abstract art. 



context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(100,100);

//termination of the first line
context.lineTo(300,300);

//creates a second line
context.lineTo(500, 100);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//use your color picker again here from http://bit.ly/2xoDfM0 or http://www.color-hex.com/
context.fillStyle = "rgba(500, 150, 250, 1)";


context.fill();

  //use the decimal in the aplha here (0.5)
context.strokeStyle = "rgba(0, 0, 0, 1)";

// the "a" stands for aplpha chanel which is the transparency of the line or object /  0 = invisible - 1 = solid color - use decimals to fade between

//creates the stroke
context.stroke()


//creates a stroke along the above defined line (one pixel)
context.stroke();

//This is about drawing by coordinates but not the typical cartesian layout - i.e., the origin is (0,0) at top left

//telling dw we are creating a closed shape
context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(200,200);

//termination of the first line
context.lineTo(500,500);

//creates a second line
context.lineTo(600, 200);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//creates a stroke along the above defined line (one pixel)
context.stroke();

//This is about drawing by coordinates but not the typical cartesian layout - i.e., the origin is (0,0) at top left

//telling dw we are creating a closed shape
context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(50,50);

//termination of the first line
context.lineTo(200,200);

//creates a second line
context.lineTo(300, 50);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//creates a stroke along the above defined line (one pixel)
context.stroke();

//This is about drawing by coordinates but not the typical cartesian layout - i.e., the origin is (0,0) at top left

//telling dw we are creating a closed shape
context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(200,200);

//termination of the first line
context.lineTo(50,50);

//creates a second line
context.lineTo(100, 200);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//creates a stroke along the above defined line (one pixel)
context.stroke();

//This is about drawing by coordinates but not the typical cartesian layout - i.e., the origin is (0,0) at top left

//telling dw we are creating a closed shape
context.beginPath();

//this tells dw the starting point of a shape
context.moveTo(200,200);

//termination of the first line
context.lineTo(200,600);

//creates a second line
context.lineTo(500, 400);

//draws the closed shape (this is all about drawing by numbers)
context.closePath();

//creates a stroke along the above defined line (one pixel)
context.stroke();

//This is about drawing by coordinates but not the typical cartesian layout - i.e., the origin is (0,0) at top left

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

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 2 + 200;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 3/4;
var cpointY2 = canvas.height / 2 - 200;

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


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

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

// starting point coordinates
var startX = 1;
var startY = canvas.height/3;

// control point 1 coordinates ( magnet )
var cpointX1 = canvas.width / 4;
var cpointY1 = canvas.height / 3 + 300;

// control point 2 coordinates ( magnet )
var cpointX2 = canvas.width * 4/3;
var cpointY2 = canvas.height / 3 - 300;

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


context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpointX1, cpointY1, cpointX2, cpointY2, endX, endY);

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

// 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,0,255)";
context.stroke();

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

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

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


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

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

 /// FILLING COLORS IN SIDE A SHAPE

// this tutorial deals with the properties of the lines

//FIRST SHAPE

 //tell Dreamweaver we are creating a closed shape
context.beginPath();

//this tells Dreamweaver the starting point of a shape in pixels from top left
context.moveTo(100,100);

    //termination point of the first line
context.lineTo(300,300);

//termination point of the first line
context.lineTo(500, 100);

//draws the third line and closes shape
context.closePath();

//line width
context.lineWidth = 10;

context.lineJoin = "round";
//creates rounded edges - there are three types of linesJoin are "miter" , "round" , or "bevel"

//EXPLAIN THE COLOR SPACE AND LINE COLOR - use http://bit.ly/2xoDfM0 or http://www.color-hex.com/ for colors
context.strokeStyle = "rgba(700, 700 , 400 , 1)";

context.stroke();
//creates a stroke along the above defined line (default width is one pixel but context.lineWidth = 10; above changed this to 10 pixels)

//first you must declare color
context.fillStyle = "red";

  //fill the shape
context.fill();


//SECOND SHAPE

context.beginPath();

context.moveTo(450, 200);

context.lineTo(600, 500);

context.lineTo(700, 300);

context.closePath();

context.lineWidth = 10;

//creates shapp corners - three types of linesJoin are "miter" , "round" , or "bevel" / try each
context.lineJoin = "bevel";

  //use your color picker again here from http://bit.ly/2xoDfM0 or http://www.color-hex.com/
context.fillStyle = "rgba(500, 150, 250, 1)";


context.fill();

  //use the decimal in the aplha here (0.5)
context.strokeStyle = "rgba(0, 0, 0, 1)";

// the "a" stands for aplpha chanel which is the transparency of the line or object /  0 = invisible - 1 = solid color - use decimals to fade between

//creates the stroke
context.stroke()