I have this simple jQuery code for drawing a triangle in a 40 by 40 canvas element:

var context1 = $("#arrow_left").get(0).getContext('2d');
context1.beginPath();
context1.moveTo(25,0);
context1.lineTo(0,20);
context1.lineTo(25,40);
context1.lineTo(25,0);
context1.fill();
context1.closePath();

Now how do I do the same thing in GWT? There is a tutorial at , but the page itself says that that is deprecated and suggests using .html. However the latter has no documentation on drawing. Can anyone tell me how to do it in GWT?

I have this simple jQuery code for drawing a triangle in a 40 by 40 canvas element:

var context1 = $("#arrow_left").get(0).getContext('2d');
context1.beginPath();
context1.moveTo(25,0);
context1.lineTo(0,20);
context1.lineTo(25,40);
context1.lineTo(25,0);
context1.fill();
context1.closePath();

Now how do I do the same thing in GWT? There is a tutorial at http://code.google./p/google-web-toolkit-incubator/wiki/GWTCanvas, but the page itself says that that is deprecated and suggests using http://google-web-toolkit.googlecode./svn/javadoc/latest//google/gwt/canvas/client/Canvas.html. However the latter has no documentation on drawing. Can anyone tell me how to do it in GWT?

• javascript
• jquery
• html
• gwt
• canvas

2 Answers 2

With the canvas you can get the Context2d object, which has the same methods as your context1 variable.

Just call the same methods ;-)

Sample Code:

Canvas canvas = Canvas.createIfSupported();
Context2d context1 = canvas.getContext2d();
context1.beginPath();
context1.moveTo(25,0);
context1.lineTo(0,20);
context1.lineTo(25,40);
context1.lineTo(25,0);
context1.fill();
context1.closePath();

I think this following link will help you. It has source code also. http://gwtcanvasdemo.appspot./

Before that download jwt-incubator http://www.java2s./Code/JarDownload/gwt-incubator/gwt-incubator.jar.zip and add inherited module in .gwt.xml file.Then add this jar to library.