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.)
Related
I'm trying to create a simple 'image editor' using HTML5/Javascript that allows to load an image (.png for instance), draw/move/delete different shapes onto that image, and retrieve the coordinates of these shapes drawn to modify the original image.
I've been reading quite a lot regarding SVG and canvas, and my final thought was to go with SVG, as it's handling all the different object states etc. Looking at different examples of code though I'm not sure anymore if SVG is the right way to go...is it even possible to accomplish what I want using SVG?
Update:
The problem is basically to ensure that the chosen strategy (SVG/canvas) supports loading an image, drawing additional shapes, and retrieving the coordinates in a way that modifications on the original image result in the same picture as shown in the editor.
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 currently working on a top-down MMORPG, in JavaScript. As you can imagine, this requires a lot of sprite sheets, and herein lies the problem.
I can simply place the clipped version of a sprite sheet onto the canvas using the canvas.drawImage method. However, this must require more performance than simply loading the clipped version of the image into a new image object which I'd then place onto the canvas using the canvas.drawImage method, as I'd only have to clip it once.
Is this at all possible, and if so, how?
It's a sprite. Any "clipping" is a convenient illusion. Loading a clipped version adds more HTTP traffic which will certainly take more time than drawing canvas image, regardless of the image source, especially when you have the image on the client already.
Being Super new to HTML 5 Canvas, I need to be able to load an image, and then be able to draw ie "hit points" on the image and save.
Ive only just started and can do this
http://www.w3schools.com/html5/canvas_drawimage.asp
so thats fine loading the image I just now need to allow the user to click on parts of the image to create dots and then be able to save them. Any good links or examples?
Opera has a good tutorial on letting the user "paint" on the canvas: http://dev.opera.com/articles/view/html5-canvas-painting/
For the graphic editing of the dots there are IMO three main options:
load the image in a canvas and really change the canvas by drawing on it
load the image in an img and use it as a background over which there is a transparent canvas that is where you draw the dots
don't touch the image and don't use a canvas but make each dot a separate img tag that simply lives on top of the image
For sending the result you probably don't want to send over the modified image, but just the selected dot configuration and that is a normal ajax request to the server. It is also possible to send the modified image in png format (or even to "downloading" it locally on the computer without sending anything to the server), but that is IMO not an useful capability in this case.
Not exactly the same, but you can achieve that. I can give you an headstart on this - checkout this jsFiddle. I built this editor using FabricJS. The save functionality is also given in the NoteEditor.js
var canvas = new fabric.Canvas('c');
var imgInstance = new fabric.Image(imgElement);
canvas.add(imgInstance);//initialize the Canvas with the image
I am new to canvas (HTML5) i have to design a paint application on canvas. There is a feature like dynamic addition of the selected image at canvas (on mouse-movements) and functionality to delete and drag that added image (Same for Text addition). Now my Question is how can we delete the images from the canvas (Note :There are no fixed no. of images added to the canvas.) Can you please suggest me the approach ??
An HTML5 Canvas is much like a real-world canvas. When you draw to the canvas the ink changes the canvas, blending with the other contents already there and forever changing them.
Ask Monet "How do you add a new person to your painting?" and he might say "you just paint them where you want them!" Similarly, you use drawImage() to 'paint' an image to your Canvas.
However, if you ask Monet "How do you remove a person from a painting?" and he would likely look at you funny and then respond "Quoi? You would have to either make a new painting, or else paint over top of the person!" Similarly, if you want to "remove" something from your canvas you either have to start over (clear the canvas and draw everything except that thing) or re-paint what was 'behind' your image on top of it.
Here is an example I made that shows one way that you can 'save' part of a canvas (by drawing it to another canvas) and then later drawing it back over something to 'erase' it.
However, I generally advise you not to use an HTML5 Canvas unless you know why you need it. You mention adding and removing items, and also detecting mouse movements. Using a retained-mode drawing system—like HTML or SVG—means that you actually add or remove or change items in an object representation, and it is up to someone else (the browser) to figure out how to best redraw them.
You may be best served by letting the "paint" portions of the user input be done on one or more canvases, and then compositing these canvases with other items (such as <div>s with text, or <img> for pictures, or vector-based SVG artwork).
You can make your own retained-mode system on type of canvas, or you can use someone else's library that does this. But instead I'd suggest that you consider whether this is the best and easiest way to accomplish your goals.