GWT Canvas (2.2.0) Transparent StrokeStyle - html

I am making a drawing application w/ GWT (2.2.0) canvas.
The problem that I'm having is that I can't set the opacity of the color.
HTML5Canvas supports the alpha channel. However through GWT it passes whatever string into a CssColor which drops the alpha.
Meaning in JS this works (I think):
context.strokeStyle = "rgba(0,0,0,0.5)";
But in GWT this doesn't (ignores alpha)
context.setStrokeStyle("rgba(0,0,0,0.5)");
because it transfers to
setStrokeStyle(CssColor.make("rgba(0,0,0,0.5)"))
And CssColor doesn't support transparency.
Any suggestions on how to go around this issue.
P.S. This is a very needed feature to be able to, say have an eraser and a highlighter.
EDIT: Square erasers can be done using context.clearRect(...), but that's not what I'm going for.

I found for you a nice example here. I hope it will help you!

Related

Libgdx - Rotated body looks pixelated

I have this problem that is driving me nuts!
So, when I draw a boxshape body with an angle different to zero on SpriteBatch(and even on Box2DDebugRenderer happens the same), the body looks pixelated in my computer's screen. This problem persists even when I run the application in my phone. I've been searching (A LOT) about this, and I have not found anything to solve this. Most people that had similar problems (not with an angle) found solutions by changing the .setFilter to LINEAR, but that did not do anything for me.
I tried to put an image of the problem here, but apparently I need 10 points :(
So here is a link with the image :)
http://postimg.org/image/xgeqttpvd/
I would really appreciate if you know the solution for this!!!!!!!!!
You are seeing aliasing from the edges of the rectangle of your sprite. You have two options. The first is to turn on antialiasing, which you can do like this in the desktop launcher and in the android launcher (not in the core project):
AndroidApplicationConfiguration config = new AndroidApplicationConfiguration();
config.numSamples = 4; //or 2 or 8 or 16
initialize(new MyGdxGame(), config);
or on Desktop:
LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
config.numSamples = 4; //or 2 or 8 or 16
new LwjglApplication(new MyGdxGame(), config);
However, this will not perform very well on a phone if your game has very many sprites at all. A better way to do it is make a sprite that has a transparent border built in. Something like this (screenshot from Gimp to show transparency:
Then if you use LINEAR filtering, it will clean up the edges, because the visible edges are internal to the sprite, and not aligned with the actual polygon. Note that you will have to adjust your sprite to be slightly larger than your box2d body so it visually matches the body.

Rendering not working with MediaElement windows RT

I need to take thumbnail from Video playing with MediaElement
For this i learn there is RenderTargetBitmap in windows 8.1 API
RenderTargetBitmap a = new RenderTargetBitmap();
await a.RenderAsync(myMedia);
thumb.Source = a;
and second way i got with help of WinRTXamlToolkit.Composition toolkit which do rendring with WriteableBitmapRenderExtensions class
WriteableBitmap w = await WriteableBitmapRenderExtensions.Render(myMedia);
thumb.Source = w;
Both these methods are working with all UIElement but not with MediaElement
only black screen is visible when source this to Image object.
Can any one tell me why? and how can i take thumbnail from video?
It seems like the methods you mentioned might be limited in that regard. I'd still try RenderTargetBitmap but with something overlaid on top of the MediaElement. I believe if you place anything on top of a MediaElement, like a 0.01 opacity, 1x1 sized, black rectangle - it will switch to run in some different rendering mode where it is possible RenderTargetBitmap would be able to render it. Otherwise I think someone discussed here a while back a question of capturing a frame from a video stream. IIRC it is a pretty involved process though, involving using DirectX or Media Foundation and quite a bit of native code.

ActionScript3: How to make an animation out of a series of images?

I'm new to AS3 and I'm trying to create a simple game with it.
So far, I have been able to draw images like this:
[Embed(source = 'C:/mypath/myimage.png')]
public static var myImageClass:Class;
private var myImage:Bitmap = new myImageClass();
and then render myImage.
but that draws only a picture with no animation.
What I want is to import this picture:
and then cut the image to series of subimages and draw an animation out of them, rather than a single image. How may I do this?
Thanks!
This is called "Blitting". You could accomplish it with fairly decent results, depending on your deployment target and how many animations you require, using BitmapData.copyPixels(), but it's more ideal to use the Starling Framework, which employs Stage3D hardware acceleration.
More here:
Introducing the Starling Framework (Video tutorial)
Starling documentation
What you are looking for is SpriteSheet support. You can easily write this yourself or use existing libraries (like Starling for instance).
The idea is to draw an area of the image at each frame to actually create the animation. Depending on the format of your sprite sheet, you may have to add another file to describe the positions of each rectangle to draw.
This page explains how to implement it.

How to resize images with gwt and canvas?

is there a option to a animated resize with canvas in GWT? I use GWT 2.3. and plugins like GWTCanvas doesn't work with this version.
Btw.: I haven't found any tutorial or example on how to use canvas in GWT. Maybe someone has a good convas tutorial for gwt?
greetz, destiny
With GWT2.3 you don't need GWTCanvas, as the canvas support is present in GWT2.3.
Here are a few links
GWT's canvas Javadoc
http://google-web-toolkit.googlecode.com/svn/javadoc/2.4/index.html?com/google/gwt/canvas/dom/client/package-summary.html
Sample application
http://code.google.com/p/gwtcanvasdemo/source/browse/#svn%2Ftrunk%2Fsrc%2Fcom%2Fgoogle%2Fgwt%2Fgwtcanvasdemo%253Fstate%253Dclosed
A tutorial
http://www.giantflyingsaucer.com/blog/?p=2338
There is no option to animate resize the image, you will have to implement your own function. To resize the image inside a canvas you need to use context.scale method, or context.drawImage(..) methods.

HTML5 Canvas drawing is layering a new path over the existing path at each new point. Why?

This is hard to explain so I created a JS Fiddle to show what is going on: http://jsfiddle.net/dGdxS/ - (Webkit only) Just mouse over the canvas to draw - you may need to click around
I noticed the performance of the canvas was not what I expected, and when I set the line alpha I think I see why.
It looks like every new point I add to the drawing it is layering a completely new line over the previous line. The stroke alpha is set to 1%, and when you draw the older areas of the stroke begin to darken as the layers build up.
I assume I am doing something wrong. Do I need to clear the canvas before drawing to it at each new point?
HTML5 canvas does not come with an endPath method, but instead you can call context.beginPath() again to close the current path and begin a new one.
This is as opposed to calling context.closePath(), which will actually draw a line to the beginning of the current path, but not end it. If you were to draw again, the pen will simply continue drawing from that same point that closed the path. See this excellent related SO answer for more details and explanations.
Because you never call ctx.closePath();, so it will redraw the entire path from the beginning each time.
So you really want something similar to this:
http://jsfiddle.net/dGdxS/7/