scale canvas as image

HTML

<button id="resizer">Click to resize the canvas</button>
<br/>
<canvas id="canvas" width=200 height=150></canvas>

CSS

body {
            background-color: ivory;
            padding:10px;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // draw some content
        ctx.lineWidth = 3;
        ctx.fillStyle = "blue";
        ctx.strokeStyle = "red";
        ctx.rect(50, 50, 100, 50);
        ctx.fill();
        ctx.stroke();
        ctx.font = "14px Verdana";
        ctx.fillStyle = "white";
        ctx.fillText("Scale Me", 65, 75);
        
        var img = document.createElement('IMG');
				img.src = "http://sudopedia.enjoysudoku.com/images/UniqueRectangleDeadlyPattern.png";
        
        function saveResizeAndRedisplay(scaleFactor) {

            // save the canvas content as imageURL
            // var data = canvas.toDataURL();

            // resize the canvas
            canvas.width *= scaleFactor;
            canvas.height *= scaleFactor;

            // scale and redraw the canvas content
            // var img = new Image();
            img.onload = function () {
				        // ctx.scale(scaleFactor, scaleFactor);
    						ctx.drawImage(img, 0, 0);
								ctx.fillText ("Hello World", 50, 60);
                // ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
				        // ctx.fillText("Scale Me", 65, 75);
            }
            // img.src = data;
            img.src = "http://sudopedia.enjoysudoku.com/images/UniqueRectangleDeadlyPattern.png";
        }

        $("#resizer").click(function () {
            saveResizeAndRedisplay(1.5);
        });