Canvas- Image Patterns as Filling and Drawing Styles

Written by @m_k_amin 13 June 2013

Images can be used as the objects filling or lines drawing styles. HTML5 Canvas has feature to use different patterns for this purpose. In this code we first define an image and then use it as a pattern for filling objects or drawing shapes. It is not important that the object is curved or straight and also don't worry about the size of the image; the pattern will be repeated and fill the specified context. Below we have put different examples to show HTML5 Canvas Pattern capabilities.

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-->
<br>
<img src="http://www.html5freecode.com/files/webgl-texture-wood.jpg" style="display:none" id="imgpattern">
<canvas id="myCanvas" width="400" height="230"></canvas>
<script>
	window.addEventListener('load', loaded, false)

function loaded(){	
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')
    
    var img = document.getElementById("imgpattern")
    var imgpat= ctx.createPattern(img, "repeat")

    ctx.fillStyle= imgpat
    ctx.fillRect(10, 20, 80, 200)

	ctx.beginPath()
    ctx.moveTo(180, 30)
    ctx.lineTo(120, 200)
    ctx.lineTo(240, 200)
    ctx.closePath()
    ctx.strokeStyle= imgpat
    ctx.lineWidth= 7
    ctx.stroke()

	ctx.translate (110, 0)

	ctx.beginPath()
	ctx.moveTo(200, 20)
	ctx.lineTo(250, 20)
	ctx.quadraticCurveTo(225, 110, 280, 40)
	ctx.lineTo(280, 180)
	ctx.quadraticCurveTo(225, 110, 250, 200)
	ctx.lineTo(200, 200)
	ctx.quadraticCurveTo(225, 110, 170, 180)
	ctx.lineTo(170, 40)
	ctx.quadraticCurveTo(225, 110, 200, 20)
    ctx.lineWidth= 2
    ctx.fillStyle= imgpat
    ctx.strokeStyle= "#A75A0E"
    ctx.fill()
    ctx.stroke()
}
</script>
<div style="text-align: left"><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