ImageList.applyToCanvas

Syntax

applyToCanvas(context: CanvasRenderingContext2D, rowIdx: Number, colIdx: Number);

Parameters

context. Canvas rendering context.

rowIdx. Row index.

colIdx. Column index.

Description

The applyToCanvas method renders the loaded image on the canvas.

Comments

To load an image, use the ImageList.loadImage method.

Example

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