applyToCanvas(context: CanvasRenderingContext2D, rowIdx: Number, colIdx: Number);
context. Canvas rendering context.
rowIdx. Row index.
colIdx. Column index.
The applyToCanvas method renders the loaded image on the canvas.
To load an image, use the ImageList.loadImage method.
To execute the example, create an HTML page and add links to the following JS and CSS file in the <head> tag:
PP.js.
PP.css.
Place a file named 1.png with an image on the same level where the HTML page is located.
At the end of the document, in the <body> tag, specify name of the function to be executed after page body is loaded as attribute value:
<body onload="createImagelist()"> <div id="canvas" style="float:left; margin: 5px;"></div> </body>
Add the <script> tag with the following code to the <head> tag:
function createImagelist() {
var imagelist = new PP.ImageList();
// Create a canvas
canvas = new PP.Ui.Canvas({
// Set parent element
ParentNode: document.getElementById("canvas"),
// Set global transparency
GlobalOpacity: 1,
});
// Specify image source
imagelist.setSource("1.png");
imagelist.ImageLoading.add(function () {
// Set canvas size
canvas.setBounds(14, 9, 411, 211);
// Set shape fill style
canvas.setFillStyle("#6BBC80");
// Draw rectangle
canvas.drawRect(0, 50, 411, 211, true, false);
// Apply canvas changes
canvas.flush();
});
// Load image for further canvas drawing
function applyToCanvas() {
imagelist.applyToCanvas(canvas.getContext(), 0, 0, 14, 14);
if (imagelist.isImageLoaded())
{
console.log("Image is loaded");
}
else {
console.log("Image is not loaded");
};
};
imagelist.ImageLoaded.add(applyToCanvas);
imagelist.loadImage();
};
After executing the example the HTML page houses a canvas with the image contained in the 1.png file. The console displays a message about image loading:
Image is loaded
See also: