html5 Canvas line cap

HTML5 Canvas line Cap property can be set with lineCap attribute.
General code for adding “line cap” to a line using HTML5Canvas is:

how to “line cap” property using html5canvas

HTML5Canvas line Cap property can be set with “lineCap" attribute.
General code for adding line cap to a line using HTML5Canvas is:


context.lineCap =value-of-cap;


Line cap attributes of html5 Canvas line can take three values. These three values are
butt,round and square.

Shapes of three line cap for for html5 Canvas line

color: #333333; font: large/1.556 ‘Libertine’, Palatino, ‘Palatino Linotype’, ‘Book Antiqua’, Georgia, ‘Times New Roman’, serif; word-spacing: 0.1em; padding-left: 10px;”>
butt,round and square cap for HTML5 line
butt,round and square cap for HTML5 line
of HTML5Canvas line .
To add butt as a “line cap” for HTML5Canvas line, the following code is used.

cotext.lineCap ='butt';

The shape of butt is as given.

but cap for HTML5 Canvas line
but cap for HTML5 Canvas line

2. square

To add square as a line capHTML5 Canvas,the code is given as.


context.lineCap ='square';

The shape of square cap is given under

image for square cap for HTML5 canvas line
image for square cap for HTML5canvas line

3. round

The third type of “line cap" for HTML5Canvas line is round
The code for adding round as “line cap" is given below.


context.lineCap ='round';

The shape of round cap is given below

image of round cap for HTML5 Canvas line
image of round cap
for HTML5Canvas line

HTML5Canvas “line cap” tutorial complete code example


<!DOCTYPE html >
<html> 
    <head>
        <title>
            line cap of html5 canvas line
        </title> 
    </head>
    <body >
        <canvas id="myCanvas" width="600"   height="400" 
             style="border: 1px solid #0000ff;" > 
        </canvas>
        <script>
              var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');

                // butt line cap (top line)
                 context.beginPath();
                 context.moveTo(100, 100);
                 context.lineTo(100,400);
                 context.lineWidth = 20;
                 context.strokeStyle = '#0000ff';
                 context.lineCap = 'butt';
                 context.stroke();

                 // round line cap (middle line)
                 context.beginPath();
                 context.moveTo(200, 100);
                 context.lineTo(200, 400);
                 context.lineWidth = 30;
                 context.strokeStyle = '#0000ff';
                 context.lineCap = 'round';
                 context.stroke();

                // square line cap (bottom line)
                 context.beginPath();
                 context.moveTo(300,100);
                 context.lineTo(300,400);
                 context.lineWidth = 30;
                 context.strokeStyle = '#0000ff';
                 context.lineCap = 'square';
                 context.stroke();
            
        </script> 
    </body>
</html>




Save this file with name


html5canvas-line-cap.html


open the above file in browser you will see the following result.

html5canvas “line cap” tutorial demo in browser

================================================

html5 canvas line cap tutorial
cap images for html5Canvas line

================================================


Html5canvas “line cap” live demo on pencode

[codepen_embed height=400 theme_id=1 slug_hash=’YPQKWB’ user=’aslamwaqar’

default_tab=’html’ animations=’run’]

[/codepen_embed]

html5Canvas “live code” demo examples on codepen.


Codepen.io

for further reading check


www.html5canvastutorials.com

WWW.w3schools.com

How to scale an image by transformation

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.

Leave a Reply

Your email address will not be published. Required fields are marked *