Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

HTML5 Canvas lineCap and lineJoin Attributes

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".

lineCap shapes

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".

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2017 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268