Canvas- Simple Colorful Line with Transparency

Written by @m_k_amin 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.

Code Snippet:

                                                
                                                <!-- this script is provided by 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='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.

M

Comments


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

0 / 300

TRENDING POST
1
2
3
4
5
VISITORS
Online Users: 12
Recent Members: FOTPU
advertisement 2