In Memory Canvas

by vrluckyin India

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<img id="img" />
<hr/>
<canvas id="signatureCanvas" width="578" height="200"></canvas>

CSS

body {
    background: #cccccc;
}

JavaScript

var signatureCanvas = document.getElementById('signatureCanvas');
var signatureContext = signatureCanvas.getContext('2d');

// draw cloud
signatureContext.beginPath();
signatureContext.moveTo(170, 80);
signatureContext.bezierCurveTo(130, 100, 130, 150, 230, 150);
signatureContext.bezierCurveTo(250, 180, 320, 180, 340, 150);
signatureContext.bezierCurveTo(420, 150, 420, 120, 390, 100);
signatureContext.bezierCurveTo(430, 40, 370, 30, 340, 50);
signatureContext.bezierCurveTo(320, 5, 250, 20, 250, 50);
signatureContext.bezierCurveTo(200, 5, 150, 20, 170, 80);
signatureContext.closePath();
signatureContext.lineWidth = 5;
signatureContext.fillStyle = '#8ED6FF';
signatureContext.fill();
signatureContext.strokeStyle = '#0000ff';
signatureContext.stroke();



/* Step:1 Modify  signature with patient data */
var canvas = document.createElement("canvas");
canvas.width=300;
canvas.height=130;
canvas.id="c";
console.log(canvas);
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(40, 0, 200, 50);

gradient.addColorStop(0, 'white');
gradient.addColorStop(0.5, 'black');
gradient.addColorStop(1, 'red');

ctx.font = "40px 'Helvetica'";
ctx.textBaseline = 'alphabetic';
ctx.scale(1,1);
ctx.fillStyle = gradient;
ctx.fillText("Hello Test!!!", 50, 100);

/*Step:2 HCP Signature*/
//console.log(signatureCanvas.toDataURL());
var img = document.createElement('img');
img.src = signatureCanvas.toDataURL();
ctx.drawImage(img,10,10);
/*Step3: Save below string into Database for a candidate */
console.log(canvas.toDataURL());

/*Following code is just for verifying signature*/
var img = document.getElementById('img');
img.src = canvas.toDataURL();