In Memory Canvas

by vrluckyin India

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<img id="img" />

CSS

body {
    background: #cccccc;
}

#c {
    display: block;
    margin: 10px auto;
    background: white;
}

JavaScript

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

console.log(canvas.toDataURL());
var img = document.getElementById('img');
img.src = canvas.toDataURL();