It's free and you have access to premium codes!
Welcome back! Please login to your account.
Don't worry, we'll send you a message to help you to recover your acount.
Please check your email for instructions to activate your account.
Written by 12 June 2013
Lines are basic shapes in 2D graphics and when lots of them are used, they may overlap on each other. So you may need to use colors for separating them and also transparency to show what located below. HTML5 Canvas (like other HTML elements) supports different ways to define a color and allows you to put Alpha value as transparency factor (between 0 and 1), when you define a color. The following code shows how you can define colors for HTML5 2D objects and how to draw transparent lines.
<!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<br>
<canvas id="myCanvas" width="400" height="150"></canvas>
<script>
var cnv = document.getElementById('myCanvas')
var ctx = cnv.getContext('2d')
ctx.beginPath()
ctx.moveTo(10, 30)
ctx.lineTo(310, 30)
ctx.strokeStyle= "lightblue"
ctx.lineWidth= 5
ctx.stroke()
ctx.beginPath()
ctx.moveTo(10, 65)
ctx.lineTo(310, 65)
ctx.strokeStyle= "hsl(50, 100%, 40%)"
ctx.lineWidth= 5
ctx.stroke()
ctx.beginPath()
ctx.moveTo(10, 100)
ctx.lineTo(310, 100)
ctx.strokeStyle= "#A76727"
ctx.lineWidth= 5
ctx.stroke()
ctx.beginPath()
ctx.moveTo(150, 20)
ctx.lineTo(150, 120)
ctx.strokeStyle= "rgba(250, 80, 190, 0.4)"
ctx.lineWidth= 15
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>
Comments
Here you can leave us commments. Let us know what you think about this code tutorial!