HTML5 Canvas, alter rectangle after it is created - html

Is this possible? For example if I have an animation that draws 1 rectangle, and then after 5 seconds it draws a second one, can I target the first one and do something like change its color?

What you'll have to do is clear the canvas, draw the 1st rectangle in another color, and then draw the second one.

Related

How can I draw things in the foreground with pygame?

How can I draw things in the foreground with pygame? With things I mean a text that I draw with .blit. Because I have a floor that hides the text I want to show How could I fix that?
blit draw one image onto another. Therefore you must draw the text after the floor:
screen.blit(floor, floor_pos)
screen.blit(text, text_pos)
First you draw the foreground, then the text.

actionscript: creating a soft mask using vector shape

I have an hourglass like vector shape and I'd like to use it to mask an image. I'd like to feather the edges - have a soft falloff in transparency that follows the contours of the hour glass. Any ideas how I can do this?
I tried using a gradient fill on a closed shape (using beginGradientFill() and curveTo() functions) but that falloff doesn't follow the contour of the vector shape, it can only go one direction.
Maybe there is a better solution but until somebody comes up with it... I assume you could do the following:
Draw whatever shape you want to use as mask into a transparent bitmap.
Scale a bit the bitmap down (or use a matrix while drawing its bitmapdata).
Apply a blur filter to it.
Put the bitmap's center to the masked clip's center so they are aligned.
Set the masked clip's cacheAsBitmap property to true.

adding transparent sprite over another sprite

I need to place a transparent sprite over another sprite. The overlaying sprite will acept some mouse events. When a user move mouse over upper sprite a curve will be drawn. After it'll be processed it will be drawn on the base sprite (and erased on upper).
The idea I have now is to place the sprite, draw a rectange of size equal to sizes of sprite and set alpha to 0.
The question is a bit dump: maybe the proposed solution is not the best. Is there a better way to set width and height (as far a I understand Sprite.width = w; will not help)?
Thank you in advance!
You can't set dimensions directly, while you can draw over that Sprite. So you can do like this:
graphics.beginFill(0,0); // zero alpha fill
graphics.lineStyle(0,0,0); // invisible lines
graphics.drawRect(0,0,width,height);
graphics.endFill();
This way your Sprite can have its alpha remaining at 1, to not hide anything that's its child. Then, whatever curve you would decide to draw in that Sprite, you can draw within a child Shape object, via graphics.moveTo and graphics.lineTo.
UPDATE: According to comments below, setting alpha to 0 won't work with newer Flash player versions, so alpha should be set to a nonzero amount for the events to register on the overlapping sprite.
graphics.beginFill(0x808080,0.01); // almost zero alpha fill

apply different colours to rectangle

I Have one rectangle. I wanted to do some animated stuff with colour on that.
That mean it should start filling with different colours in the rectangle.
It should start coming from left to right.
For example i have four colurs. Red green blue,orange.
so first 25% should be filled upwith red, next 25% with green, next 25% with blue, and remaining with
orange. First I tried to achieve the same result by using the rectangles on top of another rectangle.
so I could change the rectangles colour one by one. But the problem is, I could not remove the border for
those subrectanlge's. That is the reason itwas visible as some kind of parts in the rectangle. It was showing
as if we divided the rectangle into four with colours. I dont want to show in that. I wanted to start applying
with different colours. Any Idea how do I do that. I am lacking logical things. We can say something progressbar with different colours.
To take out the borders of the rectangles with Graphics, you just don't call the graphics function to draw. Example:
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
//Rectangle with Color_1
g2.setColor(color1); //This would be red
g2.fill(rect1);
//Rectangle with Color_2
g2.setColor(color2); //This would be green
g2.fill(rect2);
... //Repeat for other rectangles
g2.dispose()
}
Now the programmatic part would be trickier. You'd have to increase each rectangle separably.
Another way to do this would be to have a look at Color Blending. I don't really know if that's what you need but anyways:
http://www.java2s.com/Code/Java/2D-Graphics-GUI/Commoncolorutilities.htm
http://www.dbuggr.com/leothenerd/blend-rgb-color-function-java/
You'd obviously have to keep changing the colors with g2.setColor(Color) and also keep changing the color itself to suit your need.

Actionscript 3.0 drawRect works weird

I have a BitmapData object named myBitmapData. It was loaded of PNG of size 104x104. This PNG represents a red circle on the transparent background.
There is also a Sprite object named myBackground. I want render that red circle into myBackground.
myBackground.graphics.beginBitmapFill(myBitmapData);
myBackground.graphics.drawRect(0, 0, myBitmapData.width, myBitmapData.height);
myBackground.graphics.endFill();
addChild(myBackground);
Everything is fine. I see a red circle in the left top of myBackground.
But when I change the third line to
myBackground.graphics.drawRect(0, 52, myBitmapData.width, myBitmapData.height);
and expect my circle to be translated 52 pixels down, I actually obtain something strange (for me :)): there are two red half-circles (they form like hourglass).
So, the question is: how do I render myBitmapData into the random position of myBackground?
P.S.
In the case of
myBackground.graphics.drawRect(0, 104, myBitmapData.width, myBitmapData.height);
it is circle again :)
This is caused by beginBitmapFill's default repeat = true parameter. There's an example in the docs. Disabling the repetition won't work though, you'd just get a half circle then.
There are several ways to fix this:
Use a Matrix with a translation (displacement) as argument in beginBitmapFill.
Draw the rectangle at 0,0 on another Sprite, and move that sprite to where you want it on the background.
Don't draw directly to the background, but to another bitmap using copyPixels. Then fill the background with that bitmap.