Canvas text stroke

Basic Example of gradients in Canvas

by ian_smithz

HTML

<canvas id="c" width="300" height="130">
<p>No canvas.</p>
</canvas>

CSS

body {
    background: #cccccc;
}

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

JavaScript

var canvas = document.getElementsByTagName("canvas")[0],
    ctx = canvas.getContext('2d'),
    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("Hallo Welt", 50, 100);