キャンバス画像をズームしようとすると正しく動作しない

Question

キャンバス画像をズームしようとしています。ここで私が使用している関数です。

<script language="javascript"> 
$('#zoomin').click(function(){ 
    var canvasWidth=canvas.width; 
    var canvasHeight=canvas.height; 
    canvas.width=canvasWidth*1.5; 
    canvas.height=canvasHeight*1.5; 
    context.scale(1.5,1.5); 
}); 
</script> 

しかし、問題は画像がズームされているが、背景画像がズームされていないことです。

この画像をご覧ください。

UPDATE

これは私が考えることができる唯一の理由は、あなたが再描画逃している私のpaint.js

colorPurple = { 
    r: 203, 
    g: 53, 
    b: 148 
}; 
var colorGreen = { 
    r: 101, 
    g: 155, 
    b: 65 
}; 
var colorYellow = { 
    r: 255, 
    g: 207, 
    b: 51 
}; 
var colorBrown = { 
    r: 152, 
    g: 105, 
    b: 40 
}; 
var context; 

canvasWidth = 500; 
canvasHeight = 500; 
var myColor=colorYellow; 
console.log(myColor); 
var curColor = myColor; 
var outlineImage = new Image(); 
var swatchImage = new Image(); 
var backgroundImage = new Image(); 
var swatchStartX = 18; 
var swatchStartY = 19; 
var swatchImageWidth = 93; 
var swatchImageHeight = 46; 
var drawingAreaX = 0; 
var drawingAreaY = 0; 
var drawingAreaWidth = 500; 
var drawingAreaHeight = 500; 
var colorLayerData; 
var outlineLayerData; 
var totalLoadResources = 3; 
var curLoadResNum = 0; 

// Clears the canvas. 
function clearCanvas() { 

    context.clearRect(0, 0, context.canvas.width, context.canvas.height); 
}; 

// Draw a color swatch 
function drawColorSwatch(color, x, y) { 

    context.beginPath(); 
    context.arc(x + 46, y + 23, 18, 0, Math.PI * 2, true); 
    context.closePath(); 
    if (curColor === color) { 
     context.drawImage(swatchImage, 0, 0, 59, swatchImageHeight, x, y, 59, swatchImageHeight); 
    } else { 
     context.drawImage(swatchImage, x, y, swatchImageWidth, swatchImageHeight); 
    } 
    context.fillStyle = "rgb(" + color.r + "," + color.g + "," + color.b + ")"; 
    context.fill(); 


}; 

// Draw the elements on the canvas 
function redraw() { 

    var locX, 
     locY; 

    // Make sure required resources are loaded before redrawing 
    if (curLoadResNum < totalLoadResources) { 
     return; 
    } 

    clearCanvas(); 

    // Draw the current state of the color layer to the canvas 
    context.putImageData(colorLayerData, 0, 0); 

    // Draw the background 
    context.drawImage(backgroundImage, 0, 0, canvasWidth, canvasHeight); 

    // Draw the color swatches 
    locX = 0; 
    locY = 19; 
    //drawColorSwatch(colorPurple, locX, locY); 

    locY += 46; 
    //drawColorSwatch(colorGreen, locX, locY); 

    locY += 46; 
    //drawColorSwatch(colorYellow, locX, locY); 

    locY += 46; 
    //drawColorSwatch(colorBrown, locX, locY); 

    // Draw the outline image on top of everything. We could move this to a separate 
    // canvas so we did not have to redraw this everyime. 
    context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight); 
}; 

function matchOutlineColor(r, g, b, a) { 

    return (r + g + b < 100 && a === 255); 
}; 

function matchStartColor(pixelPos, startR, startG, startB) { 

    var r = outlineLayerData.data[pixelPos], 
     g = outlineLayerData.data[pixelPos + 1], 
     b = outlineLayerData.data[pixelPos + 2], 
     a = outlineLayerData.data[pixelPos + 3]; 

    // If current pixel of the outline image is black 
    if (matchOutlineColor(r, g, b, a)) { 
     return false; 
    } 

    r = colorLayerData.data[pixelPos]; 
    g = colorLayerData.data[pixelPos + 1]; 
    b = colorLayerData.data[pixelPos + 2]; 

    // If the current pixel matches the clicked color 
    if (r === startR && g === startG && b === startB) { 
     return true; 
    } 

    // If current pixel matches the new color 
    if (r === curColor.r && g === curColor.g && b === curColor.b) { 
     return false; 
    } 

    return true; 
}; 

function colorPixel(pixelPos, r, g, b, a) { 

    colorLayerData.data[pixelPos] = r; 
    colorLayerData.data[pixelPos + 1] = g; 
    colorLayerData.data[pixelPos + 2] = b; 
    colorLayerData.data[pixelPos + 3] = a !== undefined ? a : 255; 
}; 

function floodFill(startX, startY, startR, startG, startB) { 
    var newPos, 
     x, 
     y, 
     pixelPos, 
     reachLeft, 
     reachRight, 
     drawingBoundLeft = drawingAreaX, 
     drawingBoundTop = drawingAreaY, 
     drawingBoundRight = drawingAreaX + drawingAreaWidth - 1, 
     drawingBoundBottom = drawingAreaY + drawingAreaHeight - 1, 
     pixelStack = [[startX, startY]]; 

    while (pixelStack.length) { 

     newPos = pixelStack.pop(); 
     x = newPos[0]; 
     y = newPos[1]; 

     // Get current pixel position 
     pixelPos = (y * canvasWidth + x) * 4; 

     // Go up as long as the color matches and are inside the canvas 
     while (y >= drawingBoundTop && matchStartColor(pixelPos, startR, startG, startB)) { 
      y -= 1; 
      pixelPos -= canvasWidth * 4; 
     } 

     pixelPos += canvasWidth * 4; 
     y += 1; 
     reachLeft = false; 
     reachRight = false; 

     // Go down as long as the color matches and in inside the canvas 
     while (y <= drawingBoundBottom && matchStartColor(pixelPos, startR, startG, startB)) { 
      y += 1; 

      colorPixel(pixelPos, curColor.r, curColor.g, curColor.b); 

      if (x > drawingBoundLeft) { 
       if (matchStartColor(pixelPos - 4, startR, startG, startB)) { 
        if (!reachLeft) { 
         // Add pixel to stack 
         pixelStack.push([x - 1, y]); 
         reachLeft = true; 
        } 
       } else if (reachLeft) { 
        reachLeft = false; 
       } 
      } 

      if (x < drawingBoundRight) { 
       if (matchStartColor(pixelPos + 4, startR, startG, startB)) { 
        if (!reachRight) { 
         // Add pixel to stack 
         pixelStack.push([x + 1, y]); 
         reachRight = true; 
        } 
       } else if (reachRight) { 
        reachRight = false; 
       } 
      } 

      pixelPos += canvasWidth * 4; 
     } 
    } 
}; 

// Start painting with paint bucket tool starting from pixel specified by startX and startY 
function paintAt(startX, startY) { 

    var pixelPos = (startY * canvasWidth + startX) * 4, 
     r = colorLayerData.data[pixelPos], 
     g = colorLayerData.data[pixelPos + 1], 
     b = colorLayerData.data[pixelPos + 2], 
     a = colorLayerData.data[pixelPos + 3]; 

    if (r === curColor.r && g === curColor.g && b === curColor.b) { 
     // Return because trying to fill with the same color 
     return; 
    } 

    if (matchOutlineColor(r, g, b, a)) { 
     // Return because clicked outline 
     return; 
    } 

    floodFill(startX, startY, r, g, b); 

    redraw(); 
}; 

// Add mouse event listeners to the canvas 
function createMouseEvents() { 

    $('#canvas').mousedown(function (e) { 
     // Mouse down location 
     var mouseX = e.pageX - this.offsetLeft, 
      mouseY = e.pageY - this.offsetTop; 

     if (mouseX < drawingAreaX) { // Left of the drawing area 
      if (mouseX > swatchStartX) { 
       if (mouseY > swatchStartY && mouseY < swatchStartY + swatchImageHeight) { 
        curColor = colorPurple; 
        redraw(); 
       } else if (mouseY > swatchStartY + swatchImageHeight && mouseY < swatchStartY + swatchImageHeight * 2) { 
        curColor = colorGreen; 
        redraw(); 
       } else if (mouseY > swatchStartY + swatchImageHeight * 2 && mouseY < swatchStartY + swatchImageHeight * 3) { 
        curColor = colorYellow; 
        redraw(); 
       } else if (mouseY > swatchStartY + swatchImageHeight * 3 && mouseY < swatchStartY + swatchImageHeight * 4) { 
        curColor = colorBrown; 
        redraw(); 
       } 
      } 
     } else if ((mouseY > drawingAreaY && mouseY < drawingAreaY + drawingAreaHeight) && (mouseX <= drawingAreaX + drawingAreaWidth)) { 
      paintAt(mouseX, mouseY); 
     } 
    }); 
}; 

resourceLoaded = function() { 

    curLoadResNum += 1; 
    if (curLoadResNum === totalLoadResources) { 
     createMouseEvents(); 
     redraw(); 
    } 
}; 

function start() { 

    var canvas = document.createElement('canvas'); 
    canvas.setAttribute('width', canvasWidth); 
    canvas.setAttribute('height', canvasHeight); 
    canvas.setAttribute('id', 'canvas'); 
    document.getElementById('canvasDiv').appendChild(canvas); 

    if (typeof G_vmlCanvasManager !== "undefined") { 
     canvas = G_vmlCanvasManager.initElement(canvas); 
    } 
    context = canvas.getContext("2d"); 
    backgroundImage.onload = resourceLoaded(); 
    backgroundImage.src = "images/t.png"; 

    swatchImage.onload = resourceLoaded(); 
    swatchImage.src = "images/o.png"; 

    outlineImage.onload = function() { 
     context.drawImage(outlineImage, drawingAreaX, drawingAreaY, drawingAreaWidth, drawingAreaHeight); 

     try { 
      outlineLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight); 
     } catch (ex) { 
      window.alert("Application cannot be run locally. Please run on a server."); 
      return; 
     } 
     clearCanvas(); 
     colorLayerData = context.getImageData(0, 0, canvasWidth, canvasHeight); 
     resourceLoaded(); 
    }; 
    outlineImage.src = "images/d.png"; 
}; 

getColor = function(){ 

    }; 

そして、私のCSS

<style> 
body{ 
    width:100%; 
    height:auto; 
    text-align: center; 
} 
    .colorpick{ 
    widh:100%; 
    height:atuo; 
    } 
    .pick{ 
    display:inline-block; 
    width:30px; 
    height:30px; 
    margin:5px; 
    cursor:pointer; 
    } 
    canvas{ 
    border:2px solid silver; 
    } 
</style> 

Answer 1

です背景も同様です。

$('#zoomin').click(function(){ 
    canvasWidth *= 1.5; 
    canvasHeight *= 1.5; 
    canvas.width = canvasWidth; 
    canvas.height = canvasHeight; 
    context.scale(1.5,1.5); 
    context.drawImage(backgroundImage, 0, 0, canvasWidth, canvasHeight); 
}); 

あなたは私たちのHTML/CSSコードを示さなかったので、私はあなたがバックグラウンドの寸法をいじりCSSを持っていないと仮定します。

EDITあなたが関数にローカルこれらの2つの変数を作るvarキーワードでcanvasWidthとcanvasHeightを宣言するためにあなたの元.click()の実装に問題があります。従って、それらは世界的に更新されていません。これらの2つの変数を使用するredraw()を参照してください。それらは再描画される背景に関連しています。