Canvas doesnt respect size allocated for it

Flow
1

I usecss-grid that divides and assigns layout into portions.

I draw a graph in canvas. It seems canvas size doesn’t respect layout that it is assigned.

I want radar-chart is drawn in canvas with size as same as div size.

I have 2 picture, one is with simply plain div and second is with graph in canvas.

With graph

Screenshot 2024-03-26 at 17.34.34
Screenshot 2024-03-26 at 17.34.343020×1658 360 KB

With div

Screenshot 2024-03-26 at 17.33.55
Screenshot 2024-03-26 at 17.33.553022×1660 258 KB

This is may snapshot view code.


 Div canvasWrapper = new Div();
 canvasWrapper.setMinHeight("0");
 canvasWrapper.setMinWidth("0");
 Canvas canvas = new Canvas(5, 5);
 canvas.setId("spider-chart-canvas");
 canvas.setHeight(canvasWrapper.getHeight());
 canvas.setWidth(canvasWrapper.getWidth());
 canvasWrapper.add(canvas);

 FluentGridLayout mainLayout = new FluentGridLayout();
 mainLayout.withTemplateRows(new Flex(), new Flex(), new Flex())
           .withTemplateColumns(new Flex(), new Flex(), new Flex())
           .withRowAndColumn(leftLayout, 1, 1, 1, 2)
           // if uses div
           //.withRowAndColumn(getDiv(), 1, 3, 1, 3)
           // if uses Chart.js
           .withRowAndColumn(canvasWrapper, 1, 3, 1, 3)
           .withRowAndColumn(mainBottomLayout, 2, 1, 4, 4)
        ;

private Component getDiv() {
   Div div = new Div();
   div.setClassName("item");
   int nextInt = random.nextInt(0xffffff + 1);
   String colorCode = String.format("#%06x", nextInt);
   div.add(new NativeLabel(colorCode));
   div.getStyle().set("background", colorCode).set("padding", "20px");
   return div;
    }

Any help or suggestion is mostly welcomed.

Thanks in advance

sLawalata

2

I found a backdoor solution by adding these codes to my spiderchart.js

    const canvasWrapper = document.getElementById('canvas-wrapper');
    const canvas = document.getElementById('spider-chart-canvas');
    
    canvas.width = canvasWrapper.clientWidth;
    canvas.height = canvasWrapper.clientHeight;

now radar graph will be loaded correctly and it respects size allocated.
Shown by this screenshoot.

image
image3024×1660 319 KB

but I hope there is a solution in vaadin way or java way than backdoor in javascript.

many thanks.

3

Canvas has no Java; nor your third party Javascript component (spider chart) - therefore your solution is correct.

4

many thanks @knoobie