HTML5 Canvas Text Gradients
Quick little snippet demonstrating how to implement text gradients with Canvas JS API for http://codetheory.in/canvas-text-gradients-for-backgrounds-and-strokes/
Quick little snippet demonstrating how to implement text gradients with Canvas JS API for http://codetheory.in/canvas-text-gradients-for-backgrounds-and-strokes/
<canvas width="300" height="100"></canvas>
<canvas width="300" height="100"></canvas>
body {
body {background: #333;
}
canvas {display: block;
margin: 20px auto;
background: #000;
}
var canvas = document.querySelector('canvas');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
// createLinearGradient(start_x, start_y, end_x, end_y);var grad = ctx.createLinearGradient(50, 20, 220, 70);
grad.addColorStop(0, 'red');
grad.addColorStop(0.3, 'yellow');
grad.addColorStop(0.5, 'green');
grad.addColorStop(0.8, 'deepPink');
grad.addColorStop(1, 'blue');
ctx.fillStyle = grad;
ctx.textBaseline = 'top';
ctx.font = 'bold 40px Verdana';
ctx.fillText('CSSDeck', 50, 20);