Directory

← Back

Canvas

Add HTML5 Canvas support for your Vaadin application

Author

Rating

Popularity

200+

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);
    }
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Added mouse event details to mouse listener API.

Released
2017-03-31
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 7.0+ in 2.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer
Windows Phone
Microsoft Edge

Canvas - Vaadin Add-on Directory

Add HTML5 Canvas support for your Vaadin application Canvas - Vaadin Add-on Directory
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
Online