    <!DOCTYPE html (View Source for full doctype...)>
    <html>
    <head>
        <meta charset="utf-8">
      <style>
         body {
             padding: 0;
             margin: 0;
             overflow: hidden;
         }
        canvas.whiteBackgroundPreview{
            padding: 0;
            margin: 0;
            background-color: rgb(240, 240, 240); 
            font: 12px 'source_sans_proregular';
        }

        div.whiteBackGround {
            padding: 5;
            background-color: rgb(240,240,240);
            border: 1px solid rgb(197,197,197);
        }
        
        canvas.blackBackgroundPreview{
            padding: 0;
            margin: 0;
            background-color: rgb(75, 75, 75);  
            font: 12px 'source_sans_proregular';
        }

        div.blackBackGround {
            padding: 5;
            background-color: rgb(75,75,75);    
            border: 1px solid rgb(54,54,54);
        }
		  
		 @font-face {
  			font-family: 'source_sans_proregular';
  			src: url('../../Fonts/sourcesanspro-regular-webfont.eot');
  			src: url('../../Fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
       		url('../../Fonts/sourcesanspro-regular-webfont.woff') format('woff'),
       		url('../../Fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
       		url('../../Fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
  			font-weight: normal;
  			font-style: normal;
		}
          
    </style>     
    <script >
        //Constants used across
        var CONSTANTS = {
            TextAlignMent : "center",
            CanvasTag : 'canvas',
            Context2D : '2d'
        }

        var imageToFit; //Values will be filled in by SM layer Js programmetically
        var paddingHeightForText = 15; // 15 px , as the text which will be written will be with 15px font size        

        function draw2canvas() {

            var canvases = document.getElementsByTagName(CONSTANTS.CanvasTag);
            var context = canvases[0].getContext(CONSTANTS.Context2D); //We have only one canvas

            canvases[0].width = imageToFit.width;
            canvases[0].height = imageToFit.height + paddingHeightForText;

            var backgroundImage = new Image();
            var actualImage = new Image();

            backgroundImage.onload = function () {
                var pattern = context.createPattern(backgroundImage, 'repeat');
                context.fillStyle = pattern;
                context.fillRect(0,0,imageToFit.width,imageToFit.height);
                actualImage.src;//Values will be filled in by SM layer Js programmetically
            }


            actualImage.onload = function()  {
                context.drawImage(actualImage, 0, 0, actualImage.width, actualImage.height, 0, 0, imageToFit.width, imageToFit.height);                          
                drawTheSize(actualImage.width,actualImage.height);
            }

            backgroundImage.src;//Values will be filled in by SM layer Js programmetically

        }

      function drawTheSize(width,height) {

            var theCanvases = document.getElementsByTagName(CONSTANTS.CanvasTag);
            var ctx = theCanvases[0].getContext(CONSTANTS.Context2D);

            ctx.fillStyle = textColor;
            ctx.textAlign =CONSTANTS.TextAlignMent;

            ctx.fillText(width + " x " + height, imageToFit.width/2, imageToFit.height + paddingHeightForText); //fit the text at the center 
        }
    </script>   
    
    </head>
    <body onload='draw2canvas()'>
        <div>
            <canvas width="150" height="150" />
        </div>
        
    </body>
    </html>