This post contains examples of creating HTML lines, strokes, width, end caps, rectangles, fills, and linear gradients.
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 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
No comments:
Post a Comment