Drawing Project

DRAWING FINAL PROJECT CANVAS

This project was really difficult to accomplish, as it can be seen the I even did two drawings because I just wasn't satisfied with the first one therefore I decided to challenge myself and do another one, this time with bezier curves. The first one was easier to do because it was easier shapes to work around with but theist drawing was the insanely hard since I'm still new to Dreamweaver therefore I do not know lot about the codes yet. I'm still hanging in there and I'm sure things will get better, as of right now, enjoy these two drawings!

                                                       CODE FOR RING

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

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

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

      var centerX = canvas.width / 2;

      var centerY = canvas.height / 2;

      var radius = 110;

      context.beginPath();

      context.arc(centerX, centerY, radius,0, 2 * Math.PI, false);

      context.fillStyle = 'yellow';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#001000';

      context.stroke();

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

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

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

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

// begin custom shape

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = 'yellow';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#003300';

      context.stroke();

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

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

      var centerX = canvas.width / 2;

      var centerY = canvas.height / 2;

      var radius = 70;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = 'white';

      context.fill();

      context.lineWidth = 5;

      context.strokeStyle = '#003300';

      context.stroke();

//telling dw we are creating a closed shape

context.beginPath();

//this tells dw the starting point of a shape

context.moveTo(300,100);

//termination of the first line

context.lineTo(400,200);

//creates a second line

context.lineTo(500, 100);

//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

context.closePath();

      context.lineWidth = 5;

      context.fillStyle = '#8ED6FF';

      context.fill();

      context.strokeStyle = 'black';

      context.stroke()

 

 

context.beginPath();

      context.moveTo(295, 50);

      context.lineTo(318, 85);

      context.stroke();

context.beginPath();

      context.moveTo(355, 90);

      context.lineTo(350, 50);

      context.stroke();

context.beginPath();

      context.moveTo(400, 90);

      context.lineTo(400, 50);

      context.stroke();

context.beginPath();

      context.moveTo(447, 85);

      context.lineTo(450, 50);

      context.stroke();

context.beginPath();

      context.moveTo(500, 85);

      context.lineTo(510, 55);

      context.stroke();

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

                                                           CODE FOR BEE


context.rect(0,0,800,600);
// add linear gradient
      var grd = context.createLinearGradient(0, 0, 800, 600);
      // light blue
      grd.addColorStop(0, '#B4EEB4');
      // dark blue
      grd.addColorStop(1, '#25a999');
      context.fillStyle = grd;
      context.fill();

var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 3;
      var radius = 55;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 4;
      context.strokeStyle = '#003300';
      context.stroke();

  var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 75;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'black';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#003300';
      context.stroke();

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

      context.beginPath();
      context.moveTo(335, 334);
      context.bezierCurveTo(140, 10, 288, 10, 358, 163);
      context.lineWidth = 4;

      // line color
      context.strokeStyle = 'black';
      context.stroke();

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

      context.beginPath();
      context.moveTo(450, 355);
      context.bezierCurveTo(685, 10, 498, 10, 442, 162);
      context.lineWidth = 4;

      // line color
      context.strokeStyle = 'black';
      context.stroke();

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

      context.beginPath();
      context.moveTo(375, 154);
      context.lineTo(335, 39);
      context.stroke();

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

      context.beginPath();
      context.moveTo(418, 151);
      context.lineTo(435, 39);
      context.stroke();





 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 1.5;
      var radius = 80;

      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'yellow';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = '#000000';
      context.stroke();



var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 1.4;
      var radius = 75;
      var startAngle = 1.0 * Math.PI;
      var endAngle = 2.0 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 7;

      // line color
      context.strokeStyle = 'black';
      context.stroke();









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