The HTML5 canvas element is a webpage container for graphics. You can use JavaScript to draw within the canvas element. You can draw lines, boxes, rectangles, circles, ellipses paths, text, gradients, and place images on the canvas. In this article to learn how to draw lines with round or square end caps and specify that where two lines join the joint should be round or beveled.
Shown below is code for a webpage with a canvas element and JavaSCript to draw a line on a canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
function drawScreen()
{
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d");
// set up context
context.strokeStyle = "black";
context.lineWidth = 10;
// draw butt cap
context.beginPath();
context.lineCap = "butt";
context.moveTo(50,20);
context.lineTo(100,60);
context.stroke();
}
window.onload = drawScreen;
</script>
</head>
<body>
<canvas id="myCanvas" width="250" height="80" style="border:solid 1px;"></canvasv
</body>
</html>
The code defines a drawScreen function that is called by the window.onload event. The drawScreen function creates a canvas object and gets that object's context. The context is a list of the drawing methods. You might think of these as the tools in a draftsman's or artists kit. The code in the drawScreen function draws a line on the canvas.
In the code Locate the statement context.lineCap = "butt";. The lineCap attribute set to "butt" causes the end of the line to be a flat edge perpendicular to the line. The default value for the lineCap attribute is "butt".
If you edit this code to change context.lineCap = "square"; it will cause the end of the line to be square. This appears similar to "butt", except that the square on the ends of the line makes the line longer.
If you edit this code to change context.lineCap = "round"; it will cause the end of the line to be round. The round on the ends of the line also makes the line longer.
Shown below is code for a webpage with a canvas element and JavaScript to draw two intersecting lines on the canvas.
<!DOCTYPE html>
<html lang="en"v
<head>
<meta charset="UTF-8">
<script>
function drawScreen()
{
var canvas = document.getElementById("myCanvas")
var context = canvas.getContext("2d");
// set up context
context.strokeStyle = "black";
context.lineWidth = 10;
// draw butt cap
context.beginPath();
context.lineJoin = "miter";
context.moveTo(50,20);
context.lineTo(100,60);
context.lineTo(62,110);
context.stroke();
}
window.onload = drawScreen;
</script>
</head>
<body>
<canvas id="myCanvas" width="250" height="250" style="border:solid 1px;"></canvas>
</body>
</html>
In the code Locate the statement context.lineJoin = "miter";. The lineJoin attribute set to "miter" causes the point where the two lines meet to be a sharp right-angle corner. The default value for the lineJoin attribute is "miter".
If you edit this code to change context.lineCap = "bevel"; it will cause the point where the two lines meet to be beveled. A bevel is a diagnal edge where the tow lines join.
If you edit this code to change context.lineCap = "round"; it will cause the point where the two lines meet to be rounded.
More Java Script Code:
• Easy Java Script Timer Code
• Regular Expression Basics : Match a Set of Characters
• Using a Select List for Navigation
• Regular Expression Basics : How many Matches?
• Calculate The Points of an Equilateral Triangle
• Make Your Own Graphical Digital Clock
• Use JavaScript parseInt() and parseFloat() to Convert Strings to Numbers
• Code for Java Script Cube / Box Volume Calculator
• Regular Expressions Intervals
• Sams Teach Yourself HTML5 in 10 Minutes