Creating A Png From A Part Of Html

I have a couple of input fields which will get populated by users. Additionally, I have a field that displays the current time and an image that gets chosen by the user. I packed e

Solution 1:

A Quick and Dirty Demo:

How to annotate and timestamp a clicked image and then let the user save it locally:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var currentImg,currentText;

draw();

$('img').on('click',function(){
  currentImg=this;
  draw();
});

//
$('#text').on('keyup',function(e){
  currentText=($(this).val());
  draw();
});

//
$('#save').click(function(){
  $('<br>Right-Click the image below to save it<br>').appendTo('body');
  $('<img />',{
    src:canvas.toDataURL(),
  })
  .addClass('withBorder')
  .appendTo('body');
});


functiondraw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillText(newDate(),5,20);
  if(currentText){ ctx.fillText(currentText,5,35); }
  if(currentImg){ ctx.drawImage(currentImg,0,50); }
}

body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
.withBorder{border:1px solid blue;}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><h4>Click on a car of your choice</h4><imgcrossOrigin='anonymous'src='https://dl.dropboxusercontent.com/u/139992952/multple/car1.png'><imgcrossOrigin='anonymous'src='https://dl.dropboxusercontent.com/u/139992952/multple/car2.png'><br>
Comment:&nbsp;<inputtype='text'id=text><br><canvasid="canvas"width=300height=100></canvas><br><buttonid='save'>Save</button>