Assignment 02

                                                             canvas_assign_02A.html

context.beginPath();
context.moveTo(0, 0);
context.lineTo(800, 600);
context.lineWidth = 5;
context.strokeStyle = 'rgb(0, 255, 0)';
context.stroke();

canvas_assign_02B.html

var x = 0;
var y = 0;
var x1 = 400;
var y1 = 600;
var x2 = 800;
var y2 = 0;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 10;
context.strokeStyle = 'rgb(255, 255, 0)';
context.lineCap ='round';
context.stroke();

                                                                    canvas_assign_02C.html

context.beginPath();

context.moveTo(50, 300);

context.lineTo(750, 300);  

context.lineWidth = 30;

context.strokeStyle = '#6633cc';

context.lineCap ='round';

context.stroke();

canvas_assign_02D.html

var x = 725;
  var y = 450;
  var x1 = 200;
  var y1 = 450;
  var x2 = 450;
  var y2 = 100;
  context.beginPath();
  context.moveTo(x, y);
  context.lineTo(x1, y1);
  context.lineTo(x2, y2);
  context.lineTo(x, y)
  context.lineWidth = 5;
  context.fillStyle = "rgb(255, 255, 50)";
  context.fill();
  context.strokeStyle = "rgb(255,102, 51)";
  context.stroke();

     

canvas_assign_02E.html

context.beginPath();

        context.rect(50, 50, 400, 200);

        context.fillStyle = '#FF9900';

        context.fill();

        context.lineWidth = 5;

        context.strokeStyle = '#0033FF';

        context.stroke()

/////// Square # 2///////

        context.beginPath();

        context.rect(350, 350, 400, 200);

        context.fillStyle = '#66FF00';

        context.fill();

        context.lineWidth = 10;

        context.strokeStyle = '#FF0000';

        context.stroke()

canvas_assign_02F.html

canvas_assign_02G.html