<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			margin: 0;
		}
		#imagePreview {
			background-attachment: scroll;
			background-clip: border-box;
			background-color: rgba(0, 0, 0, 0);
			background-image: url('%s/Floaters/dw-extract/lib/graphite-api/public/js/ccweb.files.extract/images/light_checker_bg.png');
			background-origin: padding-box;
			background-size: auto;
			border-image-outset: 0px;
			border-image-repeat: stretch;
			border-image-slice: 100%%;
			border-image-source: none;
			border-image-width: 1;
			border-color: rgb(196, 196, 196);
			border-style: solid;
			border-width: 1px;
			cursor: default;
			white-space: nowrap;
			display:block;
            margin: 0 auto;
		}
		#theImage{
			display: none;
		}
	</style>
</head>
<body><canvas id='imagePreview' width='%s' height='%s'></canvas>
	<img onload='draw2canvas()' id='theImage' src='%s'/>
</body>
<script>
	function calcImageSizeToFit (image, targetWidth, targetHeight) {
		var ratio = image.naturalWidth / image.naturalHeight;
		var w, h;
		if (ratio * targetHeight > targetWidth) {
			w = targetWidth;
			h = targetWidth / ratio;
		} else {
			h = targetHeight;
			w = targetHeight * ratio;
		}

		var x = (targetWidth - w) / 2;
		var y = (targetHeight - h) / 2;

		return {width: w, height: h, x: x, y: y};
	}
	function draw2canvas() {
		var theCanvas = document.getElementById('imagePreview'),
			image = document.getElementById('theImage'),
			theBounds = {
				left: %f,
				top: %f,
				right: %f,
				bottom: %f
			},
			width = theBounds.right - theBounds.left,
			height = theBounds.bottom - theBounds.top,
			bnds = { naturalWidth: width,
				naturalHeight: height
			},
		   wrapperWidth = theCanvas.clientWidth,
		   wrapperHeight = theCanvas.clientHeight,
		   info = calcImageSizeToFit(bnds, wrapperWidth,
		   wrapperHeight || height),
		   nw = info.width,
		   nh = info.height,
		   context = theCanvas.getContext('2d');
		context.drawImage(image, theBounds.left, theBounds.top, width, height, (wrapperWidth - nw) / 2, (wrapperHeight - nh) / 2, nw, nh);
	}
</script>
</html>