I have a complex shape that's been generated from an SVG file that we're clipping images to in canvas.
However, all of the bezier curve coordinates are based on 0,0. Our shape's size scales depending on the size of the canvas (which scales based on the user's screen width).
Is there a way to take the shape that's already been drawn and then move it to a certain position on the canvas? Much like ctx.scale(#, #) will scale the drawn shape?
Thanks!
Use ctx.translate() to change the position of items on your canvas.
See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations#Translating
Using translate will alter the position of everything that is subsequently drawn on the canvas. If you just want to move one thing, you can either do:
ctx.translate(x,y);
// draw something
ctx.translate(-x,-y);
or you can do:
ctx.save();
ctx.translate(x,y);
// draw something
ctx.restore();
Related
I want to draw an image over another image. Then I want to rotate the images separately.
Is it possible?
How?
Many Thanks
It is possible to draw image one over the other. You can do draw as many image as you want one over the other.
Basically when you draw the image you need to provide positions. If you provide the same positions for multiple images, depending on the order of the images being drawn, they will be drawn one over the other.
So let's say you have a Tank and its's cannon as separate images. What you will do is draw the tank on the screen. Now you need the cannon image with transparent background and same dimensions as the tank(can be different dimensions) and draw on the same position. That will give an illusion that the cannon is attached to the Tank. Now u can rotate these 2 images separately.
Below is an example :
Sprite tankSprite = new Sprite(new Texture("tank.png"));
Sprite turretSprite = new Sprite(new Texture("turret.png"));
//Set the rotations
tankSprite.setRotation(angle);
turretSprite.setRotation(angle);
//Set the positions
tankSprite.setPosition(x, y);
turretSprite.setPosition(x, y);
//Draw the sprites, using spritebatch
tankSprite.draw(batch); // Drawn first
turretSprite.draw(batch); //Drawn over tank
Let's say this is tank body -
Let's say this is the turret (cannon) -
Now this is the result (ignore the background)-
I have rotated the turret to 90 degrees and tank is at 0 degrees. You can make changes accordingly.
This is the situation: I need to do a "splatter" effect to show the content behind (be it a body background image, or a google map). I'm thinking of overlaying a canvas on top of the actual content. The canvas will have an opaque (white) background initially. Then, I'll mask it with the splatter images and interval to show the underlying content.
I've found this fiddle that does something similar: http://jsfiddle.net/VqCbv/43/
However, the mask is drawn with fillRec and createLinearGradient Can I modify the code somehow to use an actual image for the mask, for a more flexible shape?
Thanks in advance.
All you need to do is to first create and load in an image with the "splatter". Then you set composition mode of the canvas to destination-out and simply draw the image on top of your canvas:
ctx.globalCompositeOperation = 'destination-out';
ctx.drawImage(img, 0, 0);
What will happen is that all pixels that are in the image will remove the pixels on the canvas leaving the area the image was in as a transparent area. The other pixels (the white) will be intact.
Demonstration (click canvas to splatter):
http://jsfiddle.net/AbdiasSoftware/4A4Qv/
As you can see a hole is punched in the canvas so the background is visible.
Is it possible to apply transformations to an image to transform it in a trapezium?
The image initial state is a rectangulum.
The way my scene is build, I have a polygon that allows dragging on the edges, and an image with the same size and position.
I would like the image to have the same shape of the polygon aways, so it would became a trapezium when one polygon axis is dragged. Is this possible?
I assume you're talking about something like an isosceles trapezoid rather than a simple rectangle.
The answer is No, but Yes...
No, not possible with 2D transforms--canvas.getContext("2d"). That's because 2d transforms use a 3x3 matrix that only makes parallel transforms. Since a trapezoid is non-parallel, you cannot possibly transform an image (rectangle) into a trapezoid.
But, Yes...you can use webGL (canvas 3D transforms) to do non-parallel transforms and therefore you can use canvas 3D to convert an image into a trapezoid.
When you use Graphics.drawTriangles() and Graphics.beginBitmapFill() to draw two triangles to create a rectangle face, when the face is not square or rectangle, but rather a trapezoid, or an irregular shape, the bitmap used to fill the face is distorted. In order to correct the distortion, Papervision3D has a Boolean property precise. But how does it work?
Thanks! :)
I have two images, a gameboard and the same gameboard with all posible player positions in a pressed state. When a player moves to a position on the board, I put the board image over the pressed board image and slice using context.drawImage() on the pressed image, to display the pressed position through the slice. However, my game board contains positions which are not rectangular but different shapes.
Is it possible with html 5 canvas, to cut a non-rectangular shape out of an image to display the underlying image?
I found it's possible to use clip() on shapes but I can't find a similar option on images.
you can create a third image that is a mask with transparent (alpha-channel) pixels and non-transparent pixels, and use a
globalCompositeOperation
to merge the mask and the to-be-masked image into a new image ( think you can use an xor or source-out here..