Canvas- Compositing and Mixing Images

Written by @m_k_amin 21 June 2013

It is important to set how the images formats must be when two or more ones are drawn on each other. HTML5 Canvas Composition is a parameter which sets whether the destination (background) image must be at top or the source one. It is also possible to mix them or ignore the parts which are out side of the specific image area. By combining this feature and alpha value for the transparency, you can achieve beautiful picture effects. Note that this feature is not just for images which have an external source; you can act with your own HTML5 Canvas drawn element as an image, too (refer to previous posts). See the following example to figure out more about these Canvas settings; be aware that all features may not be available for all browsers.

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-->

<select name="Slc" id="slc" onchange="redraw()">

	<option selected="selected" >Choose one . . .</option>

	<option>copy</option>

	<option>destination-atop</option>

	<option>destination-in</option>

	<option>destination-out</option>

	<option>destination-over</option>

	<option>lighter</option>

	<option>source-atop</option>

	<option>source-in</option>

	<option>source-out</option>

	<option >source-over</option>

	<option>xor</option>

</select><br>

Transparency (src):&nbsp;&nbsp;	

<input name="Alp1" id="alpB" type="range" style="width: 100px" value="1" max="1" min="0" step="0.1" onchange="redraw()"><br>

Transparency (dst):&nbsp;&nbsp;	

<input name="Alp2" id="alpF" type="range" style="width: 100px" value="1" max="1" min="0" step="0.1" onchange="redraw()"><br>

<canvas id="myCanvas" width="400" height="200"></canvas>

<img src="http://www.html5freecode.com/files/
html5-canvas-compositing.jpg" id="Bimg" style="display:none"/>

<img src="http://www.html5freecode.com/files/
html5-canvas-drawimage.jpg" id="Fimg" style="display:none"/>

<script>

    var cnv = document.getElementById('myCanvas')

    var ctx = cnv.getContext('2d')

	

	var bimg= document.getElementById('Bimg')

	var fimg= document.getElementById('Fimg')

	var comp= document.getElementById('slc')

	var alphab= document.getElementById('alpB')

	var alphaf= document.getElementById('alpF')	



	window.addEventListener('load', loaded, false)




function loaded(){
	redraw()
}

	

	

function redraw(){

	reset()

	ctx.globalAlpha= alphab.value	

	ctx.drawImage(bimg, 0, 0, 200, 200)

	ctx.globalAlpha= alphaf.value

	ctx.globalCompositeOperation = comp.value

	ctx.drawImage(fimg, 70, 40, 200, 150)	

}



function reset(){

	ctx.globalCompositeOperation = 'source-over'

	ctx.globalAlpha= 1

	ctx.drawImage(bimg, 0, 0, 200, 200)

	ctx.drawImage(fimg, 70, 40, 200, 150)	

}

</script>

<div style="text-align: left"><font face="Tahoma"><a target="_blank" href="https://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