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:
• JavaScript Variable Scope
• Code for Java Script Cylinder / Cone Volume Calculator
• Replace Drop-down with Drag-and-drop
• Easy Code for Date Count Down
• JavaScript to Copy and Paste Text to the Clipboard
• Binary Subtraction with Example JavaScript Code
• Easy Slide Show Code
• Java Script Math Object Trigonometric Methods
• Easy Expanding Banner Code
• Using the Java Script Array Object