How to create a canvas in Vaadin 11?

Hello, I am very new to Vaadin so I am unsure of how it works, sorry! I am trying to implement a canvas so that I can draw boxes on it, and save the boxes as JSON afterwards. I actually have a Javascript and HTML5 version working, but I do not know how to do it the Java way. I tried to implement a [Canvas]
( component, but it seems that a lot of files are missing (probably not compatible with Vaadin 11, I’m not sure). Also, can I ask, if I am using Gradle to compile my project, how should I go about downloading these components if I’m not using Maven? Are there any ways I should go about doing this? Any help is much appreciated, thank you!


With Vaadin 11 if you don’t plan on making the Canvas in the same way as the old Canvas add-on (e.g. to be able to controll all canvas functions from the server) then you can just create a wrapper on the JS + HTML version that you have.

Just create the server side have the correct


And the through the element api get and set the json.

As an sample where values are sent as a JsonArray to the client

    public void setVisibleValues(int... values) {
        JsonArray array = Json.createArray();
        for (int i = 0; i < values.length; i++) {
            array.set(i, Integer.toString(values[i]
        getElement().setPropertyJson("values", array);

The client-side html/js then handles the values variable change.

For gradle there is the [Gradle vaadin plugin]

  • Mikael