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.
Related
I have a fabric canvas which inside a clip mask I call it "artboard" (check image below)
I want to zoom to some specific point inside my canvas (example zoom the rectangle) without zooming the entire artboard and keep the same width and height for artboard (check images)
I'm working in a new year them and i will find a canvas effect but my canvas background -color will be black i want to to remove canvas background color and show my body images in canvas background .
Here my demo code https://jsfiddle.net/pzg0zuog/
Do you have any idea how to remove this issues.
In your main function replace these two lines:
ctx.fillStyle = 'rgba(0,0,0,0.2)';
ctx.fillRect(0, 0, width, height);
With this line:
ctx.clearRect(0, 0, width, height)
This will clear the canvas each frame rather than drawing a black rectangle over top of the canvas each frame.
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();
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..
I would like to use an image for background in the canvas element provided by HTML5.
The thing is I don't want the drawing to modify this image, I just want it to be use as a reference or guide for the user.
For example: if I draw a background image on the canvas then I add some lines and random drawings, once I use the erase tool it will erase both the lines I've made and the background image.
How can I prevent this?
Thanx.
you can use CSS to position the canvas over an <img> element with your background
this is similar to the usual trick to do layered animations: just do a different <canvas> element for each layer and put one on top of the other.
non-drawn pixels of <canvas> are transparent, not white.
You can simply use CSS.
Lets say you have a canvas such as :
<canvas id="Canvas" width="385px" height="330px"></canvas>
You can use CSS to put a background image :
#Canvas{background:url(Grid.png)}