Canvas- Lines with Different Ending and Joining Styles
Written by 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 http://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='http://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>
Example:
Let's stay in touch
Get the latest and greatest javascript codes directly to your mail
TRENDING POST
VISITORS
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!