Is this possible in canvas to do something like this on screen?
Basically I want to:
Upload any image to canvas [DONE]
Put any type of mask on it (here on screen this circle) [DONE]
Move,rotate and scale image [DONE]
Be able to see rest of the image around the mask(it should be darkened) like on this screen
I try various ways to render it with
ctx.globalCompositeOperation
but I only get image inside the mask and rest of the image is covered by background of canvas (although i can move or rotate image)
Edit:
When I rotate it it should look like on the second picture
And then i want to clip this rectangle and save to file (which also is DONE)
The question has already cut out the image required so one way of getting what is needed is to draw the whole image on a canvas, draw a mask over it and then place the already obtained image over that.
However, it is possible to do it the other way round.
Draw the image on a canvas, scaling, skewing, stretching, rotating it as required.
Then draw the semi transparent overlay on it e.g.
ctx.beginPath();
ctx.rect(0,0,width,height);
ctx.fillStyle = “rgba(0,0,0,0.4);
ctx.fill();
cutting out the required mask. Without knowing exactly what shape is required it’s not possible to give the exact code for this but see for example https://stackoverflow.com/questions/36711841/apply-bitmap-mask-to-image-on-html5-canvas which describes how to remove part of a mask.
Related
I have a project I'm currently working on that I cannot seem to Google a solution for. I have an HTML canvas that I'm using ctx.drawImage() to stack a couple images, the issue I'm having is I cannot figure out a way to draw an image specifically this, using a pattern like this. Is there anyway this can be done easy, or would I need to attempt to generate the image server-side then push it to the client to draw?
The order of images I'm attempting to draw is as follows:
Background ColorA rounded maskThe first linked image (this is the one that I want to draw with a pattern)
I'm trying to keep the first two layers visible, and just covering the non-transparent part of the third with the pattern file. All layers have the parts that need to be transparent set as transparent.
Updated to meet additional conditions added to question since this answer was first posted:
You don't state if the rounded mask has filled or transparent center but the following assumes filled center:
Draw letter image
Change comp. mode to "source-atop" (see old answer below on how-to)
Draw pattern. You now have the pattern in the shape of the letter.
Change comp. mode to "destination-over"
Draw mask, this will end up "behind" existing content
Fill canvas with background color using same comp. mode.
Old answer
Sure, draw the first image, provided it has an alpha channel, to the canvas.
Then change composite mode to source-atop (source-in can also be used but it will remove existing content which doesn't end up under the new pixels):
ctx.globalCompositeOperation = "source-atop";
Then draw the second image on top. To change back to the normal mode:
ctx.globalCompositeOperation = "source-over";
I would like to crop an image using (javascript)FabricJS + HTML5 canvas.
Background image of canvas is a Fabric image object.
Crop area
is a FabricJS Rectangle.
I attached an image too. (you can see what i would like to accomplish)
Is it possible to resize FabricJS canvas somehow to keep only the area selected by rectangle(green dotted rectangle). I think i have all necessary coordinates as you can see on attachment.
Anybody have any ideas/(algorithm,pseudo code) how can i solve it using javascript(FabricJS) ?
The code is already provided in the comment to your question.
But in short what you need to do is listed below:
Draw a rectangular on your image (objectBeingCropped)
Using the function objectBeingCropped.toDataURL() to export the cropped area (rectangular area on the image) in blob/url format to another image object's src.
Now draw the new image which you have the src as blob, on canvas using fabric.Image()
What I'm trying to do is include what is under my canvas object in the page as part of the image when I saved what is inside the canvas.
I have an application that creates a canvas and lets you draw with the mouse on it. This drawing functionality is in place so you could draw on a page as if they were notes, so after I can save the image or page with the "notes" I draw on it.
So far I'm able to save what is drown in the canvas but because the background is not part of the canvas I can't get to save it together. I tried experimenting with html2canvas.js but it doesn't work in my case because it takes the DOM object an redraw them into the canvas, it doesn't take just what is under the canvas to be part if the final image.
I would like to know if there is a way to do this, or somehow capture the pixels in that area and redraw them as part of the canvas when I'm creating it.
Thanks a lot in advance!
Possibly a duplicate, but I'll give you a very short answer; you can't (unless you do something like html2canvas, where it transposes the DOM onto a canvas element)
This is by design. If you could it would be a security flaw. Scripts are not allowed to create images out of arbitrary stuff on a person's screen. If you search for "html canvas security rules" you'll find more information on why this is disallowed.
Unfortunately, HTML2Canvas (or something like it) is the only option, but it's only part of the puzzle. To get the effect you want, you need to create another canvas to composite the output from HTML2Canvas and the drawing canvas. You'll need to offset the output of HTML2Canvas to the position of your drawing canvas, and then draw the imagedata from your drawing canvas on top of it. Then you can use the imagedata from the compositing canvas as your output.
If I change the cursor of a page into a 'flashlight' (say, a circle), and I want to reveal an image only when passing the light (the circle) over it, what would be the best way to go about this? Using css clip? But then it can only do rectangles, so I'd have to use canvas? Perhaps there's an easy way to intersect the two images?
You can do this with a canvas easily.
Here's an example:
http://jsfiddle.net/gfZ5C/
On every mouse move, we clear the canvas, redraw the image, make a clipping region that is a circle cut out of a rectangle, and draw black on the entire canvas (which will draw only on the clipping region)
Make sense?
There are a lot of ways to achieve this effect and similar effects. You can also make much fancier light sources with a bit of canvas sorcery. See for instance my answer here: Canvas - Fill a rectangle in all areas that are fully transparent
I'm working on a Raphael JS project and need to display some transparent PNGs with only the parts that are non-transparent to be clickable. Is there a way to:
Upon mouse click, pull out the alpha of the current position.
or
Generate a path which can be be used to define the clickable region (i.e. http://raphaeljs.com/australia.html)
As raphael is for vector graphics, it is the wrong tool for your problem with png. I think canvas is what you looking for. Load your image in an canvas (the canvas doesent need to be pushed in the DOM). On click check the coords and get the pixel out of the canvas.
But maybe it will be easier to convert you png to vector graphics and use raphael instead.