Directory

← Back

CanvasWidget

Add HTML5 Canvas support for your application.

Author

Rating

Popularity

<100

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

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

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. CanvasWidget - Vaadin Add-on Directory
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
Author Homepage
Online Demo
Source Code
Discussion Forum
GWTCanvas at Google Code

CanvasWidget version 1.0
null

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.

Online