BackCanvas Property

Gets the background canvas element.

Syntax

JavaScript

get_backCanvas();
Object.defineProperty('backCanvas');

Property Value

Type	Description
Leadtools.Html.CanvasElement	The background canvas element.

Remarks

This value is null when the viewer is first initialized or when ImageUrl is set while the value of UseBackCanvas is false. In this mode, the viewer will use BackImage instead and BackCanvas is not used.

When the user sets the image into ImageUrl while the value of UseBackCanvas is true or when setting the image size directly through ImageSize, the background canvas is created and the user image can be drawn into the surface of this canvas and then applied to the foreground canvas when needed.

When using a background canvas, the value of AutoScaleBackCanvas can be used to ensure that the whole image is viewable by potentially resizing the background canvas.

Example

Start with the ImageViewer example, remove all the code inside the example function (search for the "// TODO: add example code here" comment) and insert the following code:

Open the HTML page in your browser. Now when you click the Example button, a custom 320 by 200 pixels image will be created and set in the viewer. Notice that you can pan and zoom on this image as if it were set normally through an URL.

JavaScript

example: function SiteLibrary_DefaultPage$example(viewer) {
   // Our custom image will have 320 by 200 pixels
   var width = 320;
   var height = 200;

   // Call viewer.set_imageSize with these values, this will set a new image in the viewer with 320 by 200 pixels. The back canvas will be created
   viewer.set_imageSize(lt.LeadSizeD.create(width, height));

   // Get the back canvas
   var backCanvas = viewer.get_backCanvas();

   // Get a context to it and draw our custom image
   var context = backCanvas.getContext("2d");

   // Fill with blue gradient
   var gradient = context.createLinearGradient(0, 0, width, height);
   gradient.addColorStop(0, "#8ED6FF");  // light blue
   gradient.addColorStop(1, "#004CB3");  // dark blue
   context.fillStyle = gradient;
   context.fillRect(0, 0, width, height);

   // Draw the edge in yellow
   context.strokeStyle = "#FFFF00";
   context.lineWidth = 4;
   context.strokeRect(0, 0, width, height);

   // Draw some text in the middle
   context.font = "normal 14px Verdana";
   context.fillStyle = "#FFFF00";
   context.textAlign = "center";

   var x = backCanvas.width / 2;
   var y = backCanvas.height / 2;
   context.fillText("Custom image in the viewer", x, y);

   // Inform the viewer of our changes
   viewer.invalidate();

   var exampleLabel = document.getElementById("exampleLabel");
   exampleLabel.textContent = "320 by 200 image set in the viewer, zoom and pan it";
},

BackCanvas Property

Property Value

Reference