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>
No comments:
Post a Comment