Canvas- Use a Canvas as Pattern of Drawing and Filling

Written by @m_k_amin 15 June 2013

Sometimes you have designed a 2D Canvas object and want to fill the other graphical objects with it; in other words you need an HTML5 Canvas object to be a pattern for another Canvas object. HTML5 lets you to do this, like what we have done for image patterns (previous code). The following example is showing how to use and repeat a Canvas pattern for drawing and filling different objects. Note that like before the pattern must be used as the filling style.

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="CanvasPattern" width="32" height="32" style="display:none"></canvas>
<canvas id="myCanvas" width="400" height="230"></canvas>
<script>
    var cnv = document.getElementById('CanvasPattern')
    var ctx = cnv.getContext('2d')
    var deg = Math.PI/180

	ctx.translate (15, 17)

for (i=0; i<=360; i+=15){
	ctx.rotate(i*deg)
    ctx.beginPath()
    ctx.moveTo(0, 0)
    ctx.lineTo(15, 0)
    ctx.lineTo(8, 10)
    ctx.lineTo(0, 10)
    ctx.shadowBlur = 5
	ctx.closePath()
	ctx.shadowColor= "rgba(220,210,220,.4)"
	ctx.shadowOffsetX = ctx.shadowOffsetY = 5
    ctx.strokeStyle= "rgba(190,20,210,0.8)"
    ctx.lineWidth= 0.5
    ctx.stroke()
}
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')
    
    var img = document.getElementById("CanvasPattern")
    var imgpat= ctx.createPattern(img, "repeat")

    ctx.fillStyle= imgpat
    ctx.fillRect(10, 25, 80, 180)

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

	ctx.translate (110, 0)

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