CanvasWidget
Add HTML5 Canvas support for your application.
An add-on that wraps the Canvas API to be used in the server side. Also includes a rudimentary mouse listener API for catching clicks on the canvas.
NOTE: This add-on is only compatible with Vaadin 6. There is a Vaadin 7 compatible version available here: http://vaadin.com/addon/canvas
Sample code
// Draw some arcs and circles canvas.saveContext(); canvas.clear(); canvas.translate(30, 70); canvas.setFillStyle("#f0f"); canvas.setColorStrokeStyle("#0ff"); canvas.setLineWidth(2); for (int i = 0; i < 4; ++i) { for (int j = 0; j < 3; ++j) { canvas.beginPath(); float x = 25 + j * 50; float y = 25 + i * 50; float radius = 20; float startAngle = 0; float endAngle = (float) (Math.PI + (Math.PI * j) / 2); boolean anticlockwise = i % 2 != 0; canvas.arc(x, y, radius, startAngle, endAngle, anticlockwise); if (i > 1) { canvas.fill(); } else { canvas.stroke(); } } } canvas.translate(160, 20); canvas.setColorStrokeStyle("#ff0"); canvas.setLineWidth(4); canvas.beginPath(); canvas.arc(75, 75, 50, 0, (float) (Math.PI * 2), true); canvas.moveTo(110, 75); canvas.arc(75, 75, 35, 0, (float) Math.PI, false); canvas.moveTo(65, 65); canvas.arc(60, 65, 5, 0, (float) (Math.PI * 2), true); canvas.moveTo(95, 65); canvas.arc(90, 65, 5, 0, (float) (Math.PI * 2), true); canvas.stroke(); canvas.restoreContext();
Links
Compatibility
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
new API: fillText allows you to draw text to the canvas new API: setFont allows you to set font properties that are used by the fillText method new API: setTextBaseline allows you specify text alignment, used by the fillText method Optimization: The protocol used to transfer canvas commands from the server to the client is now a lot less verbose.
- Released
- 2012-03-21
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 6.2+
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
CanvasWidget - Vaadin Add-on Directory
Add HTML5 Canvas support for your application.Online Demo
Source Code
Discussion Forum
GWTCanvas at Google Code
CanvasWidget version 1.0.1
Updated to Vaadin 6.3.4 and added a build script. No functional changes.
CanvasWidget version 1.0.2
Fixed a bug that with the drawImage() commands.
CanvasWidget version 1.0.3
Fixed a bug that prevented the drawImage methods from displaying the image unless it was already cached by the browser.
CanvasWidget version 1.1
new API: fillText allows you to draw text to the canvas
new API: setFont allows you to set font properties that are used by the fillText method
new API: setTextBaseline allows you specify text alignment, used by the fillText method
Optimization: The protocol used to transfer canvas commands from the server to the client is now a lot less verbose.