Canvas

Add HTML5 Canvas support for your Vaadin application

View larger

Close

This component allows you to draw on a server-side canvas using an API that mimics the HTML5 Canvas.

Features:

• Most of the HTML5 Canvas API
• Mouse click and move events

For more information see the Github page: https://github.com/hezamu/vaadincanvas

Sample code

public class TestUI extends UI {
    private Canvas canvas;

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout content = new VerticalLayout();
        setContent(content);

        // Instantiate the component and add it to your UI
        content.addComponent(canvas = new Canvas());

        // Draw a 20x20 filled rectangle with the upper left corner
        // in coordinate 10,10. It will be filled with the default
        // color which is black.
        canvas.fillRect(10,  10,  20,  20);
    }
}

Links

• Author Homepage
• Source Code
• More advanced example application
• Discussion Forum
• Issue Tracker

Compatibility