We Keep Coding

How Print html5 canvas with it parent div

My web page has a canvas inside div. i need to print this div with canvas using javascript .
enter image description here

You need to convert your canvas to a normal image to achieve this.
Get the data URI containing a representation of the image using the canvas.toDataURL like this,
var canvasObj = document.getElementById("yourCanvasId");
var imgObj = canvasObj.toDataURL("image/png");
Then you can write the image object as,
document.write('<img src="'+imgObj+'"/>');
This will work fine while taking the printouts.
Hope this helps!.

You can html2Canvas it gives you a png of the visible part of your Website. You can try it via browser console.

Crop image before sending as DataURL

I have a canvas that is edited by a user (some drag and drop stuff), and it has some instructions printed in text on it. I want to save the image without that text.
I am using KeneticJS. The size will always be the same and the text is at the bottom of the image, so I was thinking if I could just crop that out that would work fine. I am passing the image as a dataURL to my solution, is it possible to crop the image before sending it as a data url?
It would be great if I could just say dataURL.crop(height, width); or something.
Here is my code which, on button press, sends the image as a data url to my filemaker solution.
bGroup.on('click touchstart', function(){
stage.toDataURL({
callback: function(dataUrl) {
var myParam = encodeURIComponent(dataUrl.split(',').pop());
theURL = 'fmp://$/" & Get(FileName)& "?script=MoistureMap_Done&param=' + myParam;
window.location= theURL;
bDone.fill('green');
buttonLayer.draw();
}});
});

There's no direct way of clipping your text, but it's not difficult:
Create an image from the dataURL (or use the texted image if you still have access to it).
Create a new in-memory canvas: document.createElement('canvas');
Resize the canvas to your desired clipped size: canvas.width=10; canvas.height=10;
Draw the image from #1 onto the canvas: context.drawImage
The text at the bottom of the image will automatically be clipped since the in-memory canvas is smaller than the incoming image.
Pull the dataurl of the in-memory canvas: canvas.toDataURL

Displaying transparent background in conversion from PNG to JPEG for jsPDF

I am using jsPDF to convert images within canvas to toDataURL(). Specifically I am dealing with PNG's that once converted to JPEG and saved to a PDF file using the jsPDF plugin. I recieve a black background. I know this has to do with the PNG being able to handle transparent backgrounds and JPEG unable to register that. I know there are work arounds by creating some sort of background to replace the black background already inserted within that newly created JPEG but I am not sure how I can accomplish this?
Suggestions, thoughts?
Heres what I am doing:
$(".email_button").click(function(){
// LOOP THROUGH EACH CANVAS SECTION AND STORE THE DATA INTO PDF FORM USING JSPDF CONVERT
var canvas = $(".ifp_container_printing_15 canvas").get();
var imgData = canvas[0].toDataURL('image/jpeg');
console.log(imgData);
var doc = new jsPDF();
doc.addImage(imgData, "JPEG", 60,50);
doc.output('dataurlnewwindow');
});

Try:
var canvas = $(".ifp_container_printing_15 canvas").get(0);
var imgData = canvas.toDataURL('image/jpeg');

How to save just the image of the canvas and not all canvas

I have a canvas 800x600 for example and I use fabricjs to add one image (200 x 200).
I apply several filters on my image and I would like to save it, but for the moment, I save the canvas 800x600 and I would like just save my picture after effects.
Is it possible?

From the latest version (download and compile it from GitHub), and this one is what you want:
canvas.toDataURL(left, top, width, height);
Check the question fabric.js - create Image object from ImageData object of canvas API for kangax’s comment only.

You can use FabricJS's canvas.toDataURL method which works much like html's canvas.toDataURL
var dataURL = myFabricCanvas.toDataURL();
If you wanted your user to save their canvas to their local disk, you could do this:
Create an image from the canvas.
Open that image in a new browser window
Have the user right-click and save-as the image
Here's code:
var win=window.open();
win.document.write("<img src='"+myFabricCanvas.toDataURL()+"'/>");
Note: if your image is hosted on a different domain than your .html, you will get a CORS security error and canvas.toDataURL will fail.

Try this
<button class="btn btn-success" id="rasterize">Convert Image To PNG</button>
//************************canvas to png image**********
document.getElementById('rasterize').onclick = function() {
if (!fabric.Canvas.supports('toDataURL')) {
alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
window.open(canvas.toDataURL('png'));
var gh=(canvas.toDataURL('png'));+
alert(gh);
}
};
//--------------end canvas to png image-----------------------

Is it possible to draw multiple SVG's to a canvas?

Background
I've got a bunch of svg's in a document (with rect, path, and whatnot inside each) and I need to draw this out to a downloadable PNG image. I understand that in order to do this there are two methods: either draw the page's HTML structure to a canvas and then export from there or render an SVG and its contents straight onto a canvas.
Hypotheses
The first hypothesis I tried to render the HTML structure using html2canvas and only found out that SVG's could not be rendered via an HTML structure at all (due to security issues). The second hypothesis I tried to render an SVG to canvas via canvg only to find out that it only allowed for one SVG element to be rendered and that only the first one would be rendered.
Results
To prove the first one wrong, type in http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect to this URL and disable Javascript. To prove the second one wrong I have a fiddle to try out.
The Question
I want to make it clear that my reasoning for having multiple svg's is so that I can place them within a responsive grid system and resize via aspect ratio. Without further ado, I ask my question: How can you render multiple svg elements to a canvas? If the answer to that question is "it isn't possible", then next my question would be: Should I be rendering one svg instead and handle responsiveness another way?

You should be able to draw SVG to canvas just as any other image:
var img1 = document.createElement('img'),
img2 = document.createElement('img')
count = 2;
/// image loading is async, make sure they are loaded
img1.onload = img2.onload = function() {
count--;
if (count === 0) drawImages();
}
img1.src = 'some1.svg';
img2.src = 'some2.svg';
/// when loaded, draw them somewhere on the canvas
function drawImages() {
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img2, someX, someY);
}
That being said - there are a couple of restrictions:
FireFox currently does not want to draw images properly without width and height set inside the SVG file.
CORS (Cross-Origin Resource Sharing) applies if you want to extract images as bitmap (toDataURL/getImageData). If not they should work as normal.