Canvas- Lines with Different Ending and Joining Styles

Written by @m_k_amin 8 June 2013

HTML5 Canvas is a context for adding 2D objects to the web pages. This great feature lets to design your page more graphically and also to create online games more effectively. Unlike images and swf flash objects, which needs much more bandwidth to get loaded, HTML5 Canvas loads fast because there exist just codes transferred to the client computer and rendered there by his browser. The following example is about lines and basic shapes which are made by joining lines to each other. Different styles for line endings and shape joints are used and shown below.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<canvas id="myCanvas" width="400" height="150"></canvas>
<script>
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')
    
    ctx.beginPath()
    ctx.moveTo(10, 20)
    ctx.lineTo(10, 130)
    ctx.lineCap= "butt"
    ctx.strokeStyle= "blue"
    ctx.lineWidth= 10
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(40, 20)
    ctx.lineTo(40, 130)
    ctx.lineCap= "square"
    ctx.strokeStyle= "lightgreen"
    ctx.lineWidth= 10
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(80, 20)
    ctx.lineTo(80, 130)
    ctx.lineCap= "round"
    ctx.strokeStyle= "brown"
    ctx.lineWidth= 10
    ctx.stroke()


    ctx.beginPath()
    ctx.moveTo(110, 75)
    ctx.lineTo(150, 10)
    ctx.lineTo(190, 75)
    ctx.lineTo(150, 140)
    ctx.closePath()
    ctx.lineJoin= "miter"
    ctx.strokeStyle= "blue"
    ctx.lineWidth= 10
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(210, 75)
    ctx.lineTo(250, 10)
    ctx.lineTo(290, 75)
    ctx.lineTo(250, 140)
    ctx.closePath()
    ctx.lineJoin= "round"
    ctx.strokeStyle= "lightgreen"
    ctx.lineWidth= 10
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(310, 75)
    ctx.lineTo(350, 10)
    ctx.lineTo(390, 75)
    ctx.lineTo(350, 140)
    ctx.closePath()
    ctx.lineJoin= "bevel"
    ctx.strokeStyle= "brown"
    ctx.lineWidth= 10
    ctx.stroke()

</script>
<div style="text-align: left"><br><font face="Tahoma"><br><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div><a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300