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>
Lets
you select objects and groups by clicking or dragging over them.
You can also select groups within groups and objects within groups.
Lets
you select individual anchor points or path segments by clicking
on them, or select an entire path or group by selecting any other
spot on the item. You can also select one or more objects in a group
of objects.
