I have an Image holding the map of a country. Now I need to copy a small part of it (a city) to another Image, so as to calculate how many pixels that city occupies (using a Flood Fill algorithm). I know the Canvas element has the drawImage method, I need something similar to copy from one Image to the other, no canvas involved. Is this possible? Or I'll have to create a canvas to do that?
Related
There I am creating a stamp maker in HTML,Jquery and javascript. In the editor of my application image is adding to HTML canvas (simple) and also the text, I just create new line element and then append it to the canvas.But the problem is that I want my image to be in back of text. I googled it alot and also search stackoverflow I got the solution of creating multiple canvases but in last I have to download the canvas to file for user. There is the problem. And I want to export whole canvas along with text one and second image together.If I create seperate canvas for the text and another for image and give image one low zindex it would be fine but there will be one canvas to be exported as image.
Link to multiple layers in canvas html5 - canvas element - Multiple layers
I am hopping that we would come up with an idea of how to download both canvases as an image or find a method to take image to back of the canvas.
Any answer would be appreciated.
If you store the text, second image and first image in variables, you could just draw them on the canvas in the order you prefer. This means that, whenever there's some change in the image or text, you should clean the canvas and redraw everything.
Also, you may be interested in Compositing, since it allows you to decide where a new object is drawn in relation to the existing drawing (on top, behind, etc.)
I'm creating a whiteboard application using ASP.NET/JavaScript. HTML5 canvas is my current tool for developing whiteboard features (drawing, text, image, shape ...). How can I save my scene so that I can load it later (and continue drawing)? I've seen a function for saving PNG image of the canvas, is it the only way of saving canvas data? or is there another way that enables me to save canvas data along their semantics, for instance can I save lines, shapes, texts and images drawing on the canvas? what are my options?
A canvas is a rasterised output of the instructions given to it, purely pixel data is stored. If you need to know the steps taken to get there you will need to log them in the javascript you are using to create it in the first place. Otherwise, if it was relatively simple, you could draw each element to stacked / offscreen canvases and export these separately. Obviously this could get expensive depending on the amount you need to do.
There are things like this that 'undo' canvas operations but essentially it's just storing an array of lines and redrawing them all from scratch every time. If you click undo it removes a line from the array, otherwise it adds one. To do what you desire you would need to store an array of operations to be drawn like this from a completely black canvas.
I'm working on a 2d isometric map with HTML5 and canvas.
So, i can have a map with an infinity of tiles, but, I only displayed the tiles around the player and it's my problem.
When i retrieve the image with toDataURL(), I just retrieves the small part of the map that I displayed around the player...
I need to retrieve all the canvas, even that is not displayed, is it possible ?
No, it's not possible. toDataURL do give you the whole canvas but the whole canvas is simply what you see on the screen. Canvas does not know about anything outside this (anything drawn outside the canvas is clipped and forgotten).
If you need to get the complete map you will need to create a big enough canvas and draw the complete map then extract the image. There is no way around (using canvas).
I am trying to make a game.i want to move one of two canvas element.
i have drawn one circle and one rectangle and i want to drag rectangle.
Thanks in advance.
HTML5 Canvas is actually like a bitmap. You can set the colors of the pixels in it. So whatever you draw becomes pixels. i.e. an object will not be created. So if you need objects on Canvas and modify the Canvas content by modifying the properties (x, y, rotation etc.) of the objects you have to develop your own system which manages graphics on Canvas using objects. This system should clear and update the Canvas pixels using the properties of the objects. You will also have to create a display list to manage objects properly.
There are also a few libraries available for the same purpose
http://createjs.com/#!/EaselJS
http://www.kineticjs.com/
How do I blend these two sets of pixelData?
The maskArray specifies the pixels to use from the OverlayData. These need to be merged with the backgroundData, and inserted back into the main canvas as newBackgroundData, and as offsetX changes update as needed.
update
I think I have found a solution: simply create another hidden canvas, and then using drawImage back into the main canvas, preserving any transparency.
I played a bit with this a while ago. Have a look at what I did to see how I blend together different layers:
http://www.tistron.se/animation2.html