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');
});


function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.fillText(new Date(),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;}

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