If you take a look at what I've done so far it'll help explain what I'm after, as I'm terrible at explaining normally haha. http://logomakr.bugs3.com/
On my drawing app I've implemented the ability to add text to the canvas, however, it's not recording/saving onto the canvas like the shapes are. When I've tried looking into it, it seems like HTML Canvas text tends to place over the canvas not on it.
I even copied a simple:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
to test it out, that displays on the canvas all fine and dandy but soon as you draw a shape it vanishes and even just pressing the save button the text isn't on the png?
Is there like an alternative or a way round it?
(Let me know if you need to see the code although I'm sure you's will be able to view source on website)
Thank you in advance!
For drawn shapes (rects, circles, lines) you're using the mouseup event to trigger saving the "tempCanvas" to the "realCanvas".
But for text, you're not saving the tempCanvas to the realCanvas at all. Then when you clear the tempCanvas for additional drawings, the text is blown away. Maybe you could add a [save text] button so the user can trigger saving text's tempCanvas to realCanvas.
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 have a component that is consuming fabricjs canvas content on the event "after:render", this works well with all the functions like adding objects, moving them etc.
However when it come to free drawing, the "after:render" event only fire once the drawing is completed, ie on mouse up event. I tried to read the canvas data while the mouse is drawing but with no luck, apparently the contents is not yet rendered onto the canvas during drawing.
I understand that from this PR https://github.com/fabricjs/fabric.js/pull/2895 that the free drawing draws on this contextTop element, my question is can I read the data from it? Or is there anyway to force fabric to render free drawing contents before mouse up? I have tried renderAll() with little luck.
Thanks!
I think you can do the following:
var points = canvas.freeDrawingBrush._points;
var pathData = canvas.freeDrawingBrush.prototype.convertPointsToSVGPath.call(canvas.freeDrawingBrush, points);
This should give you the actual path data string to create a path in the system you prefer.
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'm developing a drawing application with canvas.
I would like to implement an erase functionality, but not a simple erase which is a simple white pen, a real rubber.
In fact, I have a transparent canvas added over the application, and I would like, when I draw, I can erase what I drawn, i.e put opacity to 0 !
I already search on Google & stackoverflow and I find that :
Code : JavaScript - Sélectionner
context.globalCompositeOperation = "destination-out";
context.strokeStyle = "rgba(0,0,0,0)";
But it don't work ... Too, I try different modes of globalCompositeOperation shown on MDN but there is no difference.
Help please.
It doesn't work because you draw a transparent line over what you are trying to erase... So it does nothing.
It is easy to erase when you have a white background, you just draw white over. But it is not what you want.
The trick here is to use clearRect which remove what is on the canvas, instead of drawing over other shapes.
context.clearRect(cursorX, cursorY, brushWidth, brushHeight);
It will appear as small squares but I can't see another way to do it, except maybe with pixel manipulation.
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.