I have a div with a background image, and 2 images (c1 et c2) on this background. c1 and c2 use Raphael JS class.
I would like to download a png image (or jpg) with my background image and c1 and c2.
I tried to use Canvas2Image on my main div, but i don't see c1 and c2 when i download image.
Do you have an idea ? A class to make a div screenshot with all components on this div ?
Thanks you all,
Why the "images" are missing
RaphaelJS draws with SVG so your c1,c2 drawings are not actually images -- they are SVG.
The problem is that SVG drawn onto html5 canvas triggers a security restriction that in turn stops exporting the canvas into an image (context.toDataURL is turned off by when the canvas is tainted).
This means Canvas2Image cannot display your c1,c2 image-svgs.
A workaround
First, draw your background on your main canvas.
context.drawImage(bkImage,0,0);
Second, convert your RaphaelJS drawings into a real images (not SVG) and draw them on the main canvas.
Export one of your your RaphaelJS drawings (either c1 or c2) as SVG. One library that exports to SVG is Raphael.Export
Convert that SVG (from#1) to html5 Canvas drawing commands. [See #3 for one way to convert svg to canvas commands].
Draw the commands (from#2) onto a separate html5 canvas. One library that both converts SVG to Canvas commands (==#2) and also draws them to Canvas (==#3) is canvg.
Create an imageObject from the separate canvas (from#3). You can use the Html5 Canvas native command canvas.toDataURL() to create a data url that can be used as an image.src for a new imageObject.
var c1 = new Image;
c1.src = secondCanvas.toDataURL();
Draw that real image onto your main canvas.
context.drawImage(c1,0,0);
Repeat #1-5 with c2.
Finally, now that you have security compliant images (not SVG), you can directly export your canvas content to an image (again, with context.toDataURL). You won't even need Canvas2Image if your div only contains the background image plus c1,c2.
A possible simpler alternative
SVG and Canvas drawing commands are extremely similar. If c1,c2 don't rely on non-drawing RaphaelJS methods you could fairly easily draw c1,c2 using native Canvas drawing commands (bypassing Raphael entirely).
A future alternative
Both SVG and Canvas have remarkably similar drawing abilities.
But SVG adds full DOM capabilities -- full html element events & properties. And Canvas focuses on rendering speed -- rendering hundreds of shapes at 60 frames per second.
The organization that recommends how browsers work (W3C) receives RFP's about making SVG & Canvas drawings compatible
However, SVG-Canvas interactivity is not currently available.
Related
I'm working on a project and would like to use both p5.js and fabric.js on the same canvas. I need the functionality of fabric.js to drag around pictures on the canvas and p5.js to dynamically draw lines between the pictures as they're being dragged. I'm not sure if this is possible because it seems like both have their own separate canvas creation functions
p5.js
createCanvas(100, 50);
fabric.js
canvas = new fabric.Canvas('c');
The fabric line class seems a little too rigid to accomplish the effect I'm after, so I'm looking for either an idea for a workaround or a different library that would be better for drawing dynamic lines on a fabric canvas.
It is not possible to combine both of them with one canvas element. These libraries take full control of the canvas of reference. Even if you were able to initialise both libraries on the same canvas element you will loose whatever was displayed by p5.js on the first FarbicJS canvas.renderAll() function call.
I don't know what exactly is your problem, but as an alternative I think you could try to have two canvases on top of each other (since the canvas element is invisible by default). One running on FabricJS and one on p5.js and somehow interact with each other. But, that will add some additional complexity.
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 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.
In HTML5, using the canvas object you can draw an image.
context.drawImage(imageObj, x, y);
How does this work under the hood? Is the browser drawing pixels or using svg? I do not see any svg elements being added to the dom, so I am assuming the browser is drawing pixels, but how does it accomplish this all? Is there a library that the browser is using?
For the sake of discussion I guess we could just consider Webkit, but I would also be interested in what other browsers (IE) do.
Canvas is a pixel-based interface, SVG is a markup-language for vector graphics, they are two very separate things.
If you add an image to canvas it loads it first into the dom and then renders it to the canvas.
You can use SVG in conjunction with Canvas though. Say you wanted your canvas app to scale, you could simply rerender your svg files in different sizes to the canvas like described here
Because SVG-graphics can be used like images, they can just be rendered onto canvas like images.
If you want to have more in depth knowledge about canvas just read the spec
Well...you asked!
Think of canvas as a big, living bitmap...and here are the details:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html
I have already cropped an image in an irregular shape. I need to insert an image into the cropped part. I have used HTML5 and JavaScript (kinetic.js) to do this (see: http://imgur.com/Lyt3j). I have done the area plotting. I don't want shapes like rect, poly etc. I need a user-defined shape and should be cropped using mouse.
Can anyone please help me with it?
Take a look at the compositing settings of the 2d context. These allow you to use a path or an image to perform masking on a canvas. When you .fillPath the path you created above with a solid fillColor and context.globalCompositeOperation = 'destination-in', the path will not be drawn and only those parts of the image will remain which are covered by the interior of the path. The rest will be alpha-transparent. When you use the 'source-out' operation instead, you create a transparent "hole" in the canvas you draw the path to.
So when you have a canvas with the source image (the image you want to insert), a canvas with the destination image (the image you want to insert the other image into) and the path, there are thee ways to do it.
a) you draw the path to the source canvas with source-in, so you have a graphic in the correct shape on it. Then you set the composite operation back to source-over and then drawImage the source canvas onto the destination canvas. This will crop the image on the source canvas, so make sure to create a copy beforehand when you still need it.
b) you draw the path to the destination image with destination-out to erase the area enclosed by the path, set the composite operation to destination-atop and then drawImage the source image to the destination image, which will then be inserted "behind" the transparent parts of the destination. This variant is non-destructive for the source canvas. Remember to set the globalCompositeOperation back to source-over when you are finished, or other canvas operations might no longer do what you expect them to do.
c) Just like in b) you use destination-out to cut a hole into the destination canvas, but then you set the composite operation to the normal setting source-over and draw the destination onto the source. You now have the completed image on the source canvas.