HTML5 Canvas Scale a Drawing with Plus and Minus Buttons

Example taken from HTML5 Canvas Tutorials (http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-and-minus-buttons/)

HTML

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Raleway:100&amp;dummy=.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold,bolditalic&amp;dummy=.css">
<div id="container">
    <canvas id="myCanvas"></canvas>
<div>
    <span id="minus">-Zoom Out</span>&nbsp;&nbsp;<span id="plus">+Zoom In</span>
</div>
</div>

CSS

#container
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#myCanvas
{
    width: 640px;
    cursor: move;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#minus, #plus
{
    font-family: 'Ubuntu';
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
}

#minus:hover, #plus:hover
{
    background-color: Yellow;
}

JavaScript

function draw(scale, translatePos){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // clear canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    context.save();
    context.translate(translatePos.x, translatePos.y);
    context.scale(scale, scale);
    context.beginPath(); // begin custom shape
    context.moveTo(-119, -20);
    context.bezierCurveTo(-159, 0, -159, 50, -59, 50);
    context.bezierCurveTo(-39, 80, 31, 80, 51, 50);
    context.bezierCurveTo(131, 50, 131, 20, 101, 0);
    context.bezierCurveTo(141, -60, 81, -70, 51, -50);
    context.bezierCurveTo(31, -95, -39, -80, -39, -50);
    context.bezierCurveTo(-89, -95, -139, -80, -119, -20);
    context.closePath(); // complete custom shape
    var grd = context.createLinearGradient(-59, -100, 81, 100);
    grd.addColorStop(0, "#8ED6FF"); // light blue
    grd.addColorStop(1, "#004CB3"); // dark blue
    context.fillStyle = grd;
    context.fill();
 
    context.lineWidth = 5;
    context.strokeStyle = "#0000ff";
    context.stroke();
    context.restore();
}
 
var initialize = (function(){
    var canvas = document.getElementById("myCanvas");
 
    var translatePos = {
        x: canvas.width / 2,
        y: canvas.height / 2
    };
 
    var scale = 1.0;
    var scaleMultiplier = 0.8;
    var startDragOffset = {};
    var mouseDown = false;
 
    // add button event listeners
    document.getElementById("plus").addEventListener("click", function(){
        scale /= scaleMultiplier;
        draw(scale, translatePos);
    }, false);
 
    document.getElementById("minus").addEventListener("click", function(){
        scale *= scaleMultiplier;
        draw(scale, translatePos);
    }, false);
 
    // add event listeners to handle screen drag
    canvas.addEventListener("mousedown", function(evt){
        mouseDown = true;
        startDragOffset.x = evt.clientX - translatePos.x;
        startDragOffset.y = evt.clientY -...