How to create an image from a canvas and a textarea

Question

I have a canvas, and a textarea that resides on top of the canvas:

<canvas id="ideaBox" width="400" height="400"></canvas>
<textarea id="ideaTextArea" rows="15"></textarea>

I want to capture the contents of the box, including the textarea, into an image. Is that possible?

I tried using:

var MIME_TYPE = "image/png";
var imgURL = canvas.toDataURL(MIME_TYPE);

but it omits the text, because the text is in the textarea, not in the canvas.

I also tried using html2canvas ( http://html2canvas.hertzen.com/ ), but you can only pass one element into the script, so I can't pass both the canvas and the textarea.

Anyone have ideas, or experience with this?

Answer 1

Here's how to append a caption to the bottom of an existing canvas:

Create a copy of the canvas with the textarea text appended to the copy.

1. Calculate the height of the wrapped text from the textarea assuming that text must be wrapped within the width of the original canvas (see the example code below).
2. Create a new in-memory canvas.

3. Size the new canvas to the original canvas width but to the original canvas height plus the wrapped text height.

    newCanvas.width=originalCanvas.width; newCanvas.height=originalCanvas.height+wrappedTextHeight; 

4. DrawImage the original canvas contents to the new canvas.
5. Draw the wrapped text at the bottom of the new canvas.
6. Create a new image from the new canvas using .toDataURL .

Example code and a Demo:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var cw=canvas.width; var ch=canvas.height; var text='Now is the time for all good men to come to the aid of their country.' var fontsize=14; var fontface='verdana'; // testing: draw something on the canvas ctx.fillStyle='gold'; ctx.fillRect(0,0,cw,ch); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(75,270); ctx.lineTo(100,50); ctx.lineTo(125,270); ctx.lineTo(150,50); ctx.quadraticCurveTo(250,160,150,270); ctx.lineWidth=15; ctx.strokeStyle='purple'; ctx.lineCap='round'; ctx.lineJoin='round'; ctx.stroke(); // append a caption at the bottom of the canvas applyCaption(canvas,text,fontsize,fontface); function applyCaption(origCanvas,text,fontsize,fontface){ // calc the height of the wrapped text var height=wrapText(0,0,text,fontsize,fontface,canvas.width-20); // Create a new canvas // Resize the new canvas same as original canvas // but taller by the text height var c=document.createElement('canvas'); var cctx=c.getContext('2d'); c.width=origCanvas.width; c.height=origCanvas.height+height; // draw the original canvas contents to the new canvas cctx.drawImage(origCanvas,0,0); // draw the wrapped text at the bottom of the new canvas cctx.fillStyle='white'; cctx.fillRect(0,c.height-height,c.width,height); cctx.fillStyle='black'; wrapText(10,c.height-height,text,fontsize,fontface,canvas.width-20,cctx); // create an image from the new canvas var img=new Image(); img.onload=function(){ document.body.appendChild(img); } img.src=c.toDataURL(); } function wrapText(x,y,text,fontsize,fontface,maxwidth,context){ if(!context){ // we're just calculating the wrapped text height // so create a throw-away context to work with var context=document.createElement('canvas').getContext('2d'); } var startingY=y; var words = text.split(' '); var line = ''; var space=''; var lineHeight = fontsize*1.286; context.font = fontsize + "px " + fontface; context.textAlign='left'; context.textBaseline='top' for (var n=0; n<words.length; n++) { var testLine = line + space + words[n]; space=' '; if (context.measureText(testLine).width > maxwidth) { context.fillText(line,x,y); line = words[n] + ' '; y += lineHeight; space=''; } else { line = testLine; } } context.fillText(line, x,y); return(y+lineHeight-startingY); } 

 body{ background-color: ivory; } #canvas{border:1px solid red; } img{border:1px solid lightgray; } 

 <h4>Original canvas & New canvas with appended caption</h4> <canvas id="canvas" width=250 height=300></canvas>