BackCanvas Property

JavaScript
WinRT JavaScript

  get_backCanvas();

!MISSING Scrap '_RTJavaScript_PROPERTY_SYNTAX'!

Property Value

Type	Description
CanvasElement	The background canvas element.

The current image will be drawn into the surface of this canvas and then applied to the foreground canvas when needed. Owner draw can also be used to manually draw an image or any other shape on the back canvas.

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 was set normally through a 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(Leadtools.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