Drawing an Image to the Canvas

by Nofiden Noble

HTML

<div id="myCarousel" class="carousel slide" style="min-height:546px">
    <!-- main slider carousel items -->
    <div class="noImage" style="display: none;">
        <h1>No image to display...</h1>
    </div>
    <div id="imageContainer" class="carousel-inner">
        <div class="item filtered active" data-slide-number="0">
            <canvas id="img1" width="720" height="576"></canvas>
        </div>
    </div>
    <!-- main slider carousel nav controls -->
</div>
<canvas id="canvasZoom"></canvas>

CSS

canvas {
	    cursor:crosshair;
      }

JavaScript

function getMousePos(canvas, evt){
			    var rect = canvas.getBoundingClientRect();
				return {
				  x: evt.clientX - rect.left,
				  y: evt.clientY - rect.top
				};

}
function zoomNow(){
var canvas = $("#imageContainer .active canvas")[0];
					var ctx = canvas.getContext('2d');
					$("#outputZoom").css({ display: 'block','top': e.pageY - 120, 'left': e.pageX-480});
					var mousePos = this.getMousePos(canvas, e);
					var ctxZoom = canvasZoom.getContext('2d');
					ctxZoom.putImageData(ctx.getImageData(mousePos.x-50,mousePos.y-21,100,50),0,0);
					$("#outputZoom").attr('src',document.getElementById('canvasZoom').toDataURL());
					ctx.restore();
}

var canvas = document.getElementById('img1');
var ctx = canvas.getContext('2d');
// Create an image element
var img = document.createElement('IMG');
// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
}
// Specify the src to load the image
img.src = "http://19fxej1gn5pu1ihjs3344wqk.wpengine.netdna-cdn.com/wp-content/uploads/2012/09/jaguar-personalised-number-plate-the-car-expert.png";

//Register mouse move event for main canvas
canvas.addEventListener('mousemove', zoomNow, false);
//ZoomCanvas
var canvasZoom = document.getElementById('canvasZoom');