JS gradient

Fork de http://jsfiddle.net/UYxs7/

by brasofilo

HTML

<h3 class="fiddle-header"><a href="http://stackoverflow.com/questions/14542812/how-would-you-create-a-gradient-solely-with-javascript-no-css-that-goes-from-b/14542973#14542973">SO 14542812 : Pure JS Gradient</a></h3>

<canvas id="gradient"></canvas>

CSS

html, body {
    height:100%;
}
 
canvas#gradient {
    display:block;
    height: 100%;
    width: 100%;
}

.fiddle-header {
    background-color: #ccc;
    margin:0 0 10px 0;
    text-align: center;
    color: #fff;
    font-family: sans-serif;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    padding: 3px;
}
.fiddle-header a {
    text-decoration: none;
}
.fiddle-header a:hover {
    text-decoration: underline;
}

JavaScript

var
  canvas = document.getElementById('gradient'),
  context = canvas.getContext('2d'),
  gradient = context.createLinearGradient(0, 0, 0, canvas.height);

gradient.addColorStop(0, '#ffffaa');
gradient.addColorStop(1, '#770000');  

context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);