HTML Canvas Image drawing from Vaadin

Good morning,

I am trying to make a greater usage of the HTML5 Canvas component (Pekka Maanpää’s version), but I seem to misunderstand the Drawimage part. The ‘standard’ way of using the wrapper function seem to be aimed at an URL source (i.e. for exemple). I want to use internal images (i.e. in the resource folder or, ideally a BLOB entry into a database, or direct ByteArray data)

I have a test case where I upload a image, extrats its byte, use that to create the Vaadin Image with a ByteArrayInputStream. When this image is loaded I would like to render it into the Canvas Rendering Context (rdr). However I can’t seem to understand what to pass in the “source” parameter

   private void createUpload(String ID, String label, String labelDrop) {
        Div output = new Div();

        MemoryBuffer buffer = new MemoryBuffer();
        Upload upload = new Upload(buffer);

        upload.addSucceededListener(event -> {
            try {
            } catch (IOException e) {

            image5 = new Image(new StreamResource("img.png", new InputStreamFactory() {
                public InputStream createInputStream() {
                    ByteArrayInputStream bais = new ByteArrayInputStream(image2Bytes);
                    imageLoaded = true;
                    rdr.DrawImage("img.png", 50, 50, 100, 100);

                    return bais;
            }), "alt text");


        upload.setMaxFileSize(10 * 1024 * 1024);
        upload.setId(ID + "-upload");
        output.setId(ID + "-output");
        upload.setDropLabel(new Label(labelDrop));

        addCard(label, upload, output);

Debugging the application in the browser … I see Vaadin generates those ‘dynamic resources’ into


How can I get that ^^^ string to pass to the CanvasRenderingContext to (technically speaking) pass the image data from Java to Canvas??

Edit :
Well, it seem that

                    rdr.DrawImage(image5.getSrc(), 50, 50, 100, 100);

get’s the work done, but there seem to be a timing issue on my side (i suppose). The image is only getting drawn the 2nd time I upload it.

Should it trigger some sort of timer ?