Html Codes: Canvas- Copy and Draw Image

HTML5 Canvas gives you ability to manipulate the images in your page. You can use an image and redraw it on the Canvas context; it is also possible to use the canvas itself as an image source for filling an HTML image element. HTML5 Canvas Draw Image feature is also used for cropping an image and also shrinking or magnifying it. In the following example we have cut part of an image and redrawn it. The redrawn image is zoomed in; so we have designed some kind of magnifier here!

<br>
<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->
<canvas id="myCanvas" width="400" height="250"></canvas>
<img src="http://www.kerixa.com/images/krishna.png" id="img" style="display:none"  />
<script>
	window.addEventListener('load', loaded, false)

function loaded(){	
    var cnv = document.getElementById('myCanvas')
    var ctx = cnv.getContext('2d')

	var img= document.getElementById('img')
	ctx.drawImage(img, 0, 0, 150, 220)
	ctx.strokeStyle= "red"
	ctx.strokeRect(39, 27, 30, 35)
	ctx.drawImage(cnv, 39, 27, 30, 35, 200, 50, 90, 105)

	ctx.beginPath()
	ctx.moveTo(39+30, 27)
	ctx.lineTo(200, 51)
	ctx.moveTo(39+30, 27+35)
	ctx.lineTo(200, 50+104)
    ctx.lineWidth= 2
    ctx.stroke()
}	
</script>
<div style="text-align: left"><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>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Canvas- Copy and Draw Image

You can leave comments once you sign in/up.

Review

Links