David Durbak Multimedia Graphics

Saturday, February 2, 2019

GRA2131C - HTML Self-Portrait

Assignment - Using the HTML that we have learned thus far in class, create a "South Park" type figure or a landscape/seascape image with the following attributes:

(NOTE: Post a screen shot of your portrait and your HTML on your blog. We will look at and discuss your HTML code during class.)

(REMEMBER: Do NOT copy the ten (10) dots at the end of end string of code. The dots are merely separators.)

PARAMETERS: Show understanding of the basic principles of creating shapes using HTML

- include RGB and Hexadecimal colors in your palette
- include at least one rectangle with a linear gradient
- include at least three (3) circles with a radial gradient
- include at least one triangle with a fill
- include at least two (2) arcs

SIMPLE CIRCLE CENTERED ON CANVAS:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

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

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 100;

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

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

      };

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

..........

SIMPLE CIRCLE CENTERED ON CANVAS WITH STROKE:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

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

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;

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

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

      };

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

..........

SIMPLE TOP HALF CIRCLE (ARC) WITH FILL CENTERED ON CANVAS:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

SIMPLE BOTTOM HALF CIRCLE (ARC) WITH FILL CENTERED ON CANVAS:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

SIMPLE RIGHT HAND SIDE OF ARC CENTER ON CANVAS:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.5 * Math.PI;
        var endangle = 1.5 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

SMALL SLICE OF ARC WITH FILL:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.25 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

LARGE SLICE OF ARC WITH FILL:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.25 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

CIRCLE WITH RADIAL GRADIENT CENTERED ON CANVAS:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "rgb(0,0,0)");
        grd.addColorStop(1, "rgb(255,0,0)");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "red";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

CIRCLE WITH RADIAL GRADIENT MOVED TO LEFT OF CENTER OF CANVAS:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2.2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "rgb(0,0,0)");
        grd.addColorStop(1, "rgb(255,0,0)");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

CIRCLE WITH RADIAL GRADIENT THAT FADES TO BACKGROUND COLOR:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "yellow");
        grd.addColorStop(1, "rgb(255,255,255)");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "rgb(255, 255, 255)";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

SIMPLE RIGHT ANGLE TRIANGLE WITH FILL:

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

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

// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#FF66CC';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(600, 300);

context.lineTo(300, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#FF66CC';

context.closePath();

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

};

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

..........

"BOW TIE" WITH STROKE AND FILL:

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

////////////////////////////////////// right side of bow ˇˇˇˇˇˇˇˇˇˇ

// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#00FF00';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(450, 450);

context.lineTo(450, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#00FF00';

context.closePath();

////////////////////////////////////// left side of bow ˇˇˇˇˇˇˇˇˇˇ

// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#00FF00';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(150, 450);

context.lineTo(150, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#00FF00';

context.closePath();

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

};

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

..........

SIMPLE CIRCLE WITH FILL MOVED UP FROM CENTER AND TO THE LEFT:

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2.5;
        var centerY = canvas.height / 3;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        // context.fillStyle = "green";
        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "yellow");
        grd.addColorStop(1, "yellow");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "yellow";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

..........

AN ARC:

// starting point coordinates
var startX = canvas.width/2.11;
var startY = canvas.height/2.22;

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

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

//// DRAW THE CURVE

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

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

..........

BANGS OR EYEBROWS (you can flop these, if needed):

////////////////////////// l. h. bangs////////////////////////

        var centerX = canvas.width / 3.1;
        var centerY = canvas.height / 2.63;
        var radius = 40;
        var startangle = 0.7 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = 'rgb(255,239,180)';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "brown";
        context.stroke();

    ////////////////////////// r. h. bangs////////////////////////

        var centerX = canvas.width / 2.35;
        var centerY = canvas.height / 2.63;
        var radius = 40;
        var startangle = 0.3 * Math.PI;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = 'rgb(255,239,180)';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "brown";
        context.stroke();

..........

BEZIER CURVE WITH 1 MAGNET

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

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

// starting point coordinates
var startX = canvas.width/2.25;
var startY = canvas.height/2.22;

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

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

//// DRAW THE CURVE

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

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


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

};

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

..........

BEZIER CURVE WITH 2 MAGNETS

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

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

// starting point coordinates
var startX = 180;
var startY = 360;

// ending point coordinates
var endX = 360;
var endY = 360;

// control point coordinates ( magnet )
var cpoint1X = 380;
var cpoint1Y = 400;

// control point coordinates ( magnet )
var cpoint2X = 190;
var cpoint2Y = 480;

// DRAW THE BEZIER CURVE

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpoint1X, cpoint1Y,cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 6;
context.strokeStyle = "rgb(120, 80, 80)";
context.lineCap = "round";
context.stroke();
context.closePath();

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

};

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

.........

GRA2131C - Basic HTML - Part 2

ASSIGNMENT PARAMETERS: You will be creating a very, very long blog post for this assignment.

1.) Follow the directions to create each new shape or object using Dreamweaver
2.) Create a screenshot of your Dreamweaver window (hold down Shift + Command + 3 on a Mac to create a screenshot) and post the screenshot image under the code you just pasted into your Assignment 02 blog post
3.) Create the next shape
5.) Create a new screenshot of the NEW HTML code you have created in Dreamweaver, go to your Assignment 02 post, edit the post by pasting in the new code under your existing code(s)
6.) Create a new screenshot of this new shape, post the screenshot under the new code, and UPDATE your blog post
7.) Rinse, repeat, etc., until all of the shapes have been created
8.) Post a screenshot of your work that shows both:

- each shape you've created

- and the HTML code in the screenshot.

If your screenshot does not show the HTML code, please copy and paste the code underneath each image of the shape you've created.

ASSIGNMENT - Create the following items:

canvas_assign_02A.html
- create a single line that runs from the upper l.h. corner of your canvas to the lower r.h. corner of your canvas. Make that line (the context.colorStyle) = 'rgb(0, 255, 0)' and the context.lineWidth = 5 pixels thick

canvas_assign_02B.html
- create a single line that runs in a downward angle from the uppermost l.h. corner of your canvas to the exact middle of the bottom edge of your canvas and then continues upward to the uppermost r.h. corner of your canvas. Make that line (the context.colorStyle) 'rgb(255, 255, 0)' and make the context.lineWidth = 10 pixels thick

canvas_assign_02C.html
- create a single angled 30 pixel wide line with the Hexadecimal color #6633cc with round end caps
- that starts 50 pixels from the l.h. edge and is 50 pixels from the top edge of your canvas
- ends 50 pixels from the r.h. edge of your canvas and is 50 pixels from the top edge
- and has the bottom-most point (x1, y1) centered and 50 pixels above the bottom of your canvas

canvas_assign_02D.html
- create a single 5 pixel wide line colored 'rgb(255, 102, 51)' that forms a triangle starting at a point 75 pixels from the l.h. edge of your canvas and 50 pixels from the top edge of your canvas, then continues to a point 50 pixels above the bottom edge of your canvas and is perfectly centered horizontally, then continues to a point 75 pixels from the r.h. edge and 50 pixels from the top edge of your canvas, and ends at the starting point. Fill the triangle with the color 'rgb(255, 255, 50)'

canvas_assign_02E.html
- create a square that is 400 pixels wide that starts at a point 50 pixels from the l.h. edge and 50 pixels from the top edge. Create a 5 pixel border that is any HEXADECIMAL color blue you desire with a fill that is any HEXADECIMAL color orange you desire. Create a second square that is 400 pixels wide that ENDS at a point 50 pixels from the r.h. edge and 50 pixels from the bottom edge. Create a 10 pixel border that is any color green you desire and fill it with any color red you desire

canvas_assign_02F.html
- create a rectangle that is 600 pixels wide and 400 pixels high that starts at a point 50 pixels from the l.h. edge and 50 pixels from the top edge. Create a 10 pixel wide border that is any RGB color yellow that you wish. Create a gradient fill inside the rectangle that starts as the color #ff3300 and ends as the color #6600ff

canvas_assign_02G.html
- create a rectangle that is 600 pixels wide and 400 pixels high that starts at a point 100 pixels from the l.h. edge and 100 pixels from the top edge. Create a 10 pixel wide border that is any RGB color green that you wish. Create a gradient fill inside the rectangle that starts as the color #ff3300 and ends as the color #6600ff. Add any HEXADECIMAL color red as part of the gradient fill that is exactly in the middle of the #ff3300 color and the #6600ff color

canvas_assign_02H.html
- create a rectangle that covers the entire canvas
- create a linear gradient inside the rectangle with color stop 1 as hexadecimal color 0000CC and color stop 0 as RGB color (27, 161, 226)
- create a triangle that lays on top of the rectangle using the following var coordinates:
   - x is 100 pixels from the left hand edge of the canvas and y = 100
   - x1 is 100 pixels from the right hand edge of the canvas and y1 = y
   - x2 is perfectly centered across the width of the canvas and y2 is 100 pixels from the bottom of the canvas
   - calculate coordinates x3 and y3 on your own
   - fill with ffff00 and add a 1 pixel border stroke of ffff33

Post a screenshot of your work that shows both

- each shape you've created

- and the HTML code in the screenshot.

If your screenshot does not show the HTML code, please copy and paste the code underneath each image of the shape you've created.

GRA2131C - Basic HTML - Part 1

Below are the various basic HTML writing we explored. DO NOT COPY THE ROW OF DOTS ..... They are separators.

TEXT BELOW = BLANK CANVAS

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

////////////////////////////////////// start below this line

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS

TEXT BELOW = SINGLE LINE

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

////////////////////////////////////// start below this line

context.beginPath();
context.moveTo(100, 150);
context.lineTo(450, 50);
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = SINGLE LINE USING VAR COORDINATES

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

////////////////////////////////////// start below this line

var x = 150;
var y = 200;
var x1 = 350;
var y1 = y;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A LINE THAT FORMS AN ANGLE AND CONTINUES

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

////////////////////////////////////// start below this line

var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 100;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A 15 PIXEL THICK BLUE SINGLE LINE THAT FORMS AN ANGLE AND CONTINUES

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

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

var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 600;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 15;
context.strokeStyle = 'blue';
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A 15 PIXEL THICK PINK SINGLE LINE THAT FORMS A POINTED ANGLE AND CONTINUES (NOTE THE HEXADECIMAL COLOR CODE)

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

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

var x = 100;
var y = 100;
var x1 = 375;
var y1 = 450;
var x2 = 700;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 15;
context.strokeStyle = '#ff12ff';
context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS

TEXT BELOW = A 15 PIXEL THICK TURQUOISE SINGLE LINE THAT FORMS A POINTED ANGLE AND CONTINUES (NOTE THE RGB COLOR CODE)

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

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

var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 800;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 15;
context.strokeStyle = 'rgb(0, 255, 255)';
context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS

TEXT BELOW = A 50 PIXEL THICK TURQUOISE SINGLE LINE THAT FORMS A POINTED ANGLE AND HAS ROUNDED END CAPS

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

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

var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 600;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineWidth = 50;
context.strokeStyle = 'rgb(0, 255, 255)';
context.lineCap = "round";
context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS

TEXT BELOW = A SINGLE PIXEL LINE THAT FORMS A TRIANGLE

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

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

var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 200;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y)
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A SINGLE LINE THAT FORMS A TRIANGLE WITH A COLOR FILL WITH A BLACK STROKE

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

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

var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 200;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y)
context.fillStyle = "green";
context.fill();
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A SINGLE LINE THAT FORMS A TRIANGLE WITH A COLOR FILL WITH A GREEN STROKE

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

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

var x = 50;
var y = 100;
var x1 = 300;
var y1 = 450;
var x2 = 200;
var y2 = 100;
context.beginPath();
context.moveTo(x, y);
context.lineTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x, y)
context.fillStyle = "green";
context.fill();
context.strokeStyle = "green";
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = ALTERNATE CODE THAT FORMS A TRIANGLE WITH A PINK FILL AND STROKE

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

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

// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#FF66CC';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(600, 300);

context.lineTo(450, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#FF66CC';

context.closePath();

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

};

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

......... DO NOT COPY THESE DOTS

TEXT BELOW = ALTERNATE CODE THAT FORMS TWO TRIANGLES IN THE SHAPE OF A BOWTIE

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

////////////////////////////////////// right side of bow ˇˇˇˇˇˇˇˇˇˇ

// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#00FF00';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(450, 450);

context.lineTo(450, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#00FF00';

context.closePath();

////////////////////////////////////// left side of bow ˇˇˇˇˇˇˇˇˇˇ

// Set the style properties.

context.fillStyle   = '#FF66CC';

context.strokeStyle = '#00FF00';

context.lineWidth = 0;

context.beginPath();

// Start from the far-left point.

context.moveTo(300, 300); // give the (x, y) coordinates

context.lineTo(150, 450);

context.lineTo(150, 150);

context.lineTo(300, 300);

//

context.fill();

context.stroke();'#00FF00';

context.closePath();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A 200 PIXEL WIDE BY 100 PIXEL HIGH RECTANGLE WITH A BLUE FILL AND A 25 PIXEL PINK BORDER

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

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

        context.beginPath();
        context.rect(188, 50, 200, 100);
        context.fillStyle = 'blue';
        context.fill();
        context.lineWidth = 25;
        context.strokeStyle = '#ff12ff';
        context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... Do NOT COPY THESE DOTS

TEXT BELOW = A GREEN RECTANGLE (SQUARE) WITH A MAGENTA BORDER USING VAR COORDINATES

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

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

        var x = 50;
        var y = 100;
        var width = 350;
        var height = 350;

        context.beginPath();
        context.rect(x, y, width, height);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'rgb(150, 10, 200)';
        context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS

TEXT BELOW - A RECTANGLE WITH A PURPLE BORDER AND A GRADIENT GOING FROM LIGHT BLUE IN THE UPPER L.H. CORNER TO DARK BLUE IN THE LOWER R.H. CORNER

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

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

        var x = 50;
        var y = 100;
        var width = 350;
        var height = 350;

        context.beginPath();
        context.rect(x, y, width, height);

        // add linear gradient
        var grd = context.createLinearGradient(50, 100, 350, 350);
        // light blue
        grd.addColorStop(0, "#8ED6FF");
        // dark blue
        grd.addColorStop(1, "#004CB3");

        // specify gradient fill
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 5;
        context.strokeStyle = 'rgb(150, 10, 200)';
        context.stroke();

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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS

TEXT BELOW - A RECTANGLE WITH A BLUE BORDER AND A GRADIENT GOING FROM LIGHT BLUE ACROSS THE TOP OF THE CANVAS TO DARK BLUE ACROSS THE BOTTOM OF THE CANVAS

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

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

        var x = 0;
        var y = 0;
        var width = 800;
        var height = 600;

        context.beginPath();
        context.rect(x,y,width,height);

        // add linear gradient
        var grd = context.createLinearGradient(400, 600, 400, 0);
        // dark blue
        grd.addColorStop(0, "#8ED6FF");
        // light blue
        grd.addColorStop(1, "#004CB3");

        // specify gradient fill
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();


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

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
.......... DO NOT COPY THESE DOTS

TEXT BELOW = A RECTANGLE WITH A THREE-COLOR GRADIENT FILL MOVING FROM DARK BLUE ACROSS THE TOP OF THE CANVAS TO RED IN THE MIDDLE TO LIGHT BLUE ACROSS THE BOTTOM OF THE CANVAS

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

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

        var x = 0;
        var y = 0;
        var width = 800;
        var height = 600;

        context.beginPath();
        context.rect(x,y,width,height);

        // add linear gradient
        var grd = context.createLinearGradient(400, 600, 400, 0);
        // light blue
        grd.addColorStop(0, "#8ED6FF");
       // red
       grd.addColorStop(.5, "rgb(255, 0, 0)")
        // dark blue
        grd.addColorStop(1, "#004CB3");

        // specify gradient fill
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();



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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A PINK CIRCLE WITH A BLACK BORDER CENTERED ON THE CANVAS

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

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

        var centerX = 400;
        var centerY = 300;
        var radius = 70;

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

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

      };

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

,,,,,,,,,, DO NOT COPY THESE DOTS

TEXT BELOW - TOP HALF OF A CIRCLE FILLED WITH GREEN AND A BLACK BORDER

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 1 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = BOTTOM HALF OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = RIGHT-HAND HALF OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.5 * Math.PI;
        var endangle = 1.5 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = LEFT -HAND HALF FO A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.5 * Math.PI;
        var endangle = 1.5 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = SMALL ARC ON THE RIGHT-HAND SIDE OF CIRCLE

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.25 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, true);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = LARGE ARC ON THE LEFT-HAND SIDE OF A CIRCLE WITH A GREEN FILL AND BLACK BORDER

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0.25 * Math.PI;
        var endangle = 2 * Math.PI;
        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);
        context.fillStyle = "green";
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = A CIRCLE WITH A RADIAL GRADIENT GOING FROM AN INNER BLACK TO AN OUTER RED WITH A BLACK BORDER

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);

        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "rgb(0,0,0)");
        grd.addColorStop(1, "rgb(255,0,0)");
        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = CIRCLE WITH A YELLOW GRADIENT FADING TO WHITE BACKGROUND

<!DOCTYPE HTML>
<html>
<head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        /////////////////////////////////////////////////////

        var centerX = 300;
        var centerY = 200;
        var radius = 200;
        var startangle = 0;
        var endangle = 2 * Math.PI;

        context.beginPath();
        context.arc(centerX, centerY, radius, startangle, endangle, false);

        var grd=context.createRadialGradient(centerX, centerY, 10, centerX, centerY, 200);
        grd.addColorStop(0, "yellow");
        grd.addColorStop(1, "white");

        context.fillStyle = grd;
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = "white";
        context.stroke();

        ////////////////////////////////////////////////////

      };

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = BEZIER CURVES

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

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

////Arms
// starting point coordinates
var startX = canvas.width/4.4;
var startY = canvas.height/1.2;

// ending point coordinates
var endX = canvas.width-75;
var endY = canvas.height/1.2;

// control point coordinates ( magnet )
var cpoint1X = canvas.width*.9;
var cpoint1Y = canvas.height*1;

// control point coordinates ( magnet )
var cpoint2X = canvas.width / 3;
var cpoint2Y = canvas.height / 2 + 200;

//// DRAW THE BEZIER CURVE

context.beginPath();
context.moveTo(startX, startY);
context.bezierCurveTo(cpoint1X, cpoint1Y, cpoint2X, cpoint2Y, endX, endY);

context.lineWidth = 19;
context.strokeStyle = "rgb(120, 80, 80)";
context.lineCap = "round";
context.stroke();

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

};

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

.......... DO NOT COPY THESE DOTS

TEXT BELOW = ELLIPSE (OVAL)

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

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

var centerX = 0;
      var centerY = 0;
      var radius = 50;

      // save state
      context.save();

      // translate context
      context.translate(canvas.width / 2, canvas.height / 2);

      // scale context horizontally
      context.scale(2, 1);

      // draw circle which will be stretched into an oval
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      // restore to original state
      context.restore();

      // apply styling
      context.fillStyle = '#8ED6FF';
      context.fill();
      context.lineWidth = 5;
      context.strokeStyle = 'black';
      context.stroke();

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

};

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

GRA2131C - Assignment 01 - Create A Blog

Assignment 01 - Create a Blogger site and make your first post

1.) go to www.blogger.com and click on Sign In...

2.) If you have a gmail account, sign in using your gmail username and password; if not, click on Create An Account...

3.) You will see a pop up window that guides you through creating your blog. The first thing you do is to create a Title for your blog. The blog Title can be anything you desire, such as My Great Design Projects, and you can change it at a later date, if your wish...

4.) You then select a URL and this part is VERY picky... you can ONLY use lower case letters, numbers, underscore, and dashes (hyphens)... you CANNOT use spaces, capital letters, or unique characters. As an example, you could choose:

mygreatdesignprojects OR my_great_design_projects OR my-great-design-projects

Blogger will let you know if the URL is available. If it is NOT available, you will need to come up with an alternative until Blogger says your choice is available...

5.) You can now choose a Theme (you can always change or edit your theme at a later date)...

6.) Create a post by clicking the New Post button...

7.) A new window will open. Create a Post Title. For this class, that will usually be the name or number of the course assignment...

8.) Type any pertinent information in the large box...

9.) You can also add an image by clicking on the icon that looks like a mountain range with a blue sky...

10.) Once you have entered and added all of the information, click on the orange Publish button and you will be taken back to your blog working page where you will see your new post. Hover over the post Title and you will see option to Edit, View, and Delete your post...

11.) To send a link to your post, hover over the View link...

12.) You will need to copy the URL link to your post (highlighted in green) to send a link via an email...

Go to www.blogger.com in order to create a blog with a title and a unique URL. Once you have crated your blog, create your first post with the following information:

- your name

- a short bio including your current major at PBSC

- your experience and level of competency with the following programs/apps:

a.) Adobe Acrobat

b.) Adobe Bridge

c.) Adobe Photoshop

d.) Adobe Dreamweaver

e.) Adobe InDesign

f.) Adobe Illustrator

g.) Apple iMovie

h.) BBEdit

- your expectations of this class

- hobbies and interests outside of class and college

After you have received the list of blogs of your fellow classmates, please select any three (3) bloggers and respond to their posts in the 'Comments' box at the bottom of the blog before the beginning of the next class session. You will be doing this on a regular basis.

Ideas for comments on these and future blog posts are:
- constructive critique of design and layout
- constructive critique of spelling/grammar (we are in the communications area and we must communicate with one another in a lucid, concise manner)
- constructive critique of creativity, methodology, media, process, and technique