html5 canvas drawing mutiple images and overlapping - javascript

I draw mutiple images in canvas, but i want that the user be able to define the overlapping of the image. In other words, th user select the image that appears in the front, and the image that appears in behind.
how can i accomplished that?

Use "min-height" and "min-width" while creating the div for randering chart.

You can accomplish this, assuming you only care to render the next image to be on the canvas 'in front' or 'behind' the images which were already rendered (ie not to post-facto render an image 'between' two images you already rendered on the canvas) using the globalCompositeOperation property of the 2d canvas context. MDN has an illustrative example and comprehensive documentation. Basically, in your case if you want to render the next image 'above', you would use "source-over" as a value for this property, if you want to render it behind the existing content, use "destination-over".
If you want more detailed control over the overlap of more than 2 images, you will have to adjust the order in which they are rendered as suggested in the comments so far (ie put the images in an array, sort the array in the desired fashion, and then render them).

The image on top is always the last image drawn.
A solution I use when bringing an image to the front, when it's selected, is to store all the images in array - this will also be the draw order - and the image to be on top is simply taken out of the array and placed at the end, thus being on top.

Related

Layering Canvas elements

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);

Capture what is under my Canvas as part of the 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.

Get the displayed color of an area of the screen using javascript

I am looking to get the actual displayed color of an area of the screen using Javascript.
I have a system that allows people to restyle their content and they can use RGBA colors, what this means is that while I can very simply test what the background color of an article is (for example) that may not be its actual color because it may be slightly or fully transparent and thus the layer underneath may be showing through...
I have seen various questions on here that deal with getting pixel colors from an image using Javascript, so I am wondering if canvas could be used to achieve this in some way...
What I want is to hide the text in an article, create a (maybe canvas) 'screenshot' of what the article background looks like empty, and then iterate over the pixels in there to get an average color value.
Anyone any ideas on how to do that?
You need to get a screenshot of the page using canvas, which is not trivial:
Can you take a "screenshot" of the page using Canvas?
And then getting the colour would be trivial once you have the screenshot.

HTML5 Canvas - Having 2 Canvas Objects side - by - side

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.

HTML5 Canvas Layering Objects within the same canvas

I've looked around for layering objects within the same canvas but haven't found a lot of information about it.
At the moment I've used the multiple canvas technique to layer things on top of each other
example:
canvas Holder <--- this holds all other canvas's
loading canvas
menu canvas
game canvas
background canvas
and by adding them to the "stage = new stage (mainCanvas)" in a specific order, i get the desired layering
stage.addChild(background);
stage.addChild(game);
stage.addChild(menu);
stage.addChild(loading);
This works great, however I'm wondering whether there is a way to change the zIndex of an image added to the 'game' canvas if I had 2 images in that canvas?
I've seen this sort of thing done in the fieldrunners game, the game follows a grid like format and when you place a shooter in the square above another shooter, is gets repositioned behind it..
http://fieldrunnershtml5.appspot.com/#sd --- works in chrome
any ideas how it was done?
Thanks
There is no need for multiple canvases. When you work with a game in canvas 2d you usually clear and redraw the canvas ~60 times per second. What you draw last ends up on top. So in order to simulate layers you sort all game objects in an array based on their z-index then you iterate over all objects in the array, invoking their draw methods.
There is much room for optimizing such a renderer, but this is a basic and simple way to make it work.
A canvas is just pixels - it has no "layers".
If you want to perform parallax scrolling, that sort of thing, put multiple canvases in the same place, and use transparency to show the ones behind.
Your technique using multiple canvases to implement layers is totally good approach. You should also keep track on which layer needs to be cleared/redrawn - for example map should be refreshed only when scrolled or GUI/HUD really doesn't need to be redrawn 60 times per second.
There is no such thing as z-index or objects in canvas, all mechanisms depends on your own implementation. For example you can make an array of commands or objects to draw - then sort it by zIndex (or whatever you name it) and execute each element.

Categories