I'm working on a pototype HMTL5 canvas animation that will export to quicktime.
I'm having a dynamically generated background with dynamically masked elements on top of it.
I can get the background to be made, and have it export to the server as a frame by frame animation (png sequence) and then compile the animation using FFMPEG into a quicktime. The concept is working.
However, whenever I try to put the dynamically masked elements on top of the background, the background gets affected by the mask too.
Currently the draw opperation I have goes
Draw Background element 1
Draw Background element 2
Draw Foreground Element Mask
Switch to Source-in Mode
Draw Foreground element fill
Revert to Source-Over Mode
I'm obviously using the source mode wrong, but I'm not sure it is possible to do what I want (have a mask affect the element right under it, but not ones below that).
The easiest solution I can think of would be to just layer 2 canvas objects on top of eachother...however I'm not sure how I could combine the 2 canvases into a single image for the quicktime export.
Thanks for the help
The context.drawImage method will accept another canvas as the image source.
So if you want to "flatten" all your canvases into a single canvas:
yourMainContext.drawImage(yourOverlayCanvasElement,0,0);
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";
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.
I know you can layer canvases on top of each other just as if you were making an image in Photoshop but are you able put canvas objects above and below each other or side-by-side?
I'm looking to draw a graph which allows you to choose a space and depending on what color choice you have it'll change the block based on that choice.
Here's my thought:
Canvas #1 - Draw Graph Paper
Canvas #2 - Right side of Canvas #1 - Tab that has 4 color choices. I'd figure out the x-y of these to grab the color based on the color image. Canvas 1 block color would reflect this choice.
Is this a good way of going about this implementation?
Yes you can place canvases above, below and side-by-side each other. A canvas is an HTML element and can be positioned like any other using CSS.
I'd probably try to avoid using a canvas for your color choice tab unless it's absolutely necessary for some reason you haven't mentioned. If you use standard DOM elements instead you'll be able to bind to the click event directly rather than having to figure out the mouse position relative to graphics in your canvas.
Here are some good reasons not to use canvas to create UI components.
Is it possible to set a transparent color for images loaded in HTML5?
I would be looking for something similar to the setColorKey() function available in SDL. This would be used to easily remove a background from some sprite sheets that I will be using.
There is no very straightforward way to do this, but you can use the <canvas> tag to do this.
Draw your image in the canvas, using drawImage, and then use getImageData and putImageData to perform pixel manipulation on it.
There are some examples of pixel manipulation in canvas here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
There is no built in function for this. If this doesn't need to be dynamic, then you could remove the color from the original image and make those areas transparent. Then you put the images in a div that has the background color that you just removed from the image. After that you change the background color of the div when you mouse over the image.
If that sound like the right idea and you need some starter code let me know.
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.