Html 5 - How To Zoom Canvas Background Image

I am a beginner in HTML 5, I have written a code for canvas zoom but I dont want to zoom actual canvas but the background image of canvas like in the http://www.customink.com/lab f

Solution 1:

You can use drawImage as user2422324 suggests, but you must use additional arguments to scale the image while drawing it.

In addition, you must scale the background image to a temporary canvas because fabricjs expects an imageURL when setting it's background

Here's how the scaling works:

First, create a temporary canvas and set it's size to the zoom size you desire. For example to scale the background image to 200% you would do this:

tempCanvas.width=myBackgroundImage.width*2.0;tempCanvas.height=myBackgroundImage.height*2.0;

Now use drawImage to both draw the background image to the tempCanvas. By supplying the last 4 arguments, the image will be scaled to the desired zoom (which is the current tempCanvas size).

tempContext.drawImage(myBackgroundImage,

    // the source of the draw will be the full background image0,0, myBackgroundImage.width, myBackgroundImage.height,

    // and this causes the full image to be scaled to fit the resized tempCanvas0,0, tempCanvas.width, tempCanvas.height
);

Then use fabricJS's setBackgroundImage to apply the scaled background. We can create the imageURL that fabric expects by using tempCanvas.toDataURL():

canvas.setBackgroundImage( tempCanvas.toDataURL(), function(){
    canvas.backgroundImageStretch=true;
    canvas.renderAll();
});

Note that backgroundImageStretch=true may cause the image to proportionally distort. Instead, you might want to set backgroundImageStretch=false and set backgroundImageLeft/backgroundImageTop to offset the background image.

Here is a fairly complete, but totally untested starting code:

// this is the current scaling factor of the background image// hint: originally set it at less than full size//       so it doesn't pixelate when scaled up.var scaleFactor=.50;

// create a background image object we can later scalevar fullBk=document.createElement("img");
fullBk.onload=function(){
    setBkZoom(scaleFactor);
}
fullBk.src="images/1front.png";

// create a temp canvas used to scale the bk imagevar zoomCanvas=document.createElement("canvas");
var zoomCtx=zoomCanvas.getContext("2d");

// scale the bk image and set it as the fabric backgroundfunctionsetBkZoom(scaleFactor){
    // scale the temp zoomCanvas to desired bk size// note: changing canvas width automatically clears it
    zoomCanvas.width=fullBk.width*scaleFactor;
    zoomCanvas.height=fullBk.height*scaleFactor;
    // draw a scaled version of fullBk to zoomCanvas
    zoomCtx.drawImage(fullBk,
        0,0,fullBk.width,fullBk.height,
        0,0,zoomCanvas.width,zoomCanvas.height);
    // now use the scaled zoomCanvas to set the fabric background
    canvas.setBackgroundImage(zoomCanvas.toDataURL(),function(){
        // stretch=true may cause your image to distort proportions// instead you might want to set backgroundImageLeft/backgroundImageTop // to offset the scaled image
        canvas.backgroundImageStretch=true;
        canvas.renderAll();
    }
}

Solution 2:

The easiest way would be to store the background image in an Image object and then rendering that with context.drawImage(img,X,Y,Width,Height);

Introduction: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-size/