%%html
<canvas id="ex1"></canvas>
<script>
var g = document.querySelector('#ex1').getContext('2d');
g.canvas.width = 200;
g.canvas.height = 200;

g.fillStyle = 'yellow';
g.fillRect(0, 0, g.canvas.width, g.canvas.height);
</script>

%%html
<canvas id="ex2"></canvas>
<script>
var g = document.querySelector('#ex2').getContext('2d');
g.canvas.width = 200;
g.canvas.height = 200;

var im = g.getImageData(0, 0, g.canvas.width, g.canvas.height);
var render = function(){
    for(var iy = 0; iy < g.canvas.height; iy++){
        for(var ix = 0; ix < g.canvas.width; ix++){
            var i = iy * g.canvas.width + ix;
            im.data[4*i+0] = 255;
            im.data[4*i+1] = 0;
            im.data[4*i+2] = 0;
            im.data[4*i+3] = 255;
        }
    }
    g.putImageData(im, 0, 0);
}
render();
</script>

%%html
<canvas id="ex3"></canvas>
<script>
var g = document.querySelector('#ex3').getContext('2d');
g.canvas.width = 200;
g.canvas.height = 200;

var im = g.getImageData(0, 0, g.canvas.width, g.canvas.height);
var render = function(){
    for(var iy = 0; iy < g.canvas.height; iy++){
        var fy = iy / (g.canvas.height - 1);
        for(var ix = 0; ix < g.canvas.width; ix++){
            var i = iy * g.canvas.width + ix;
            var fx = ix / (g.canvas.width - 1);
                im.data[4*i+0] = Math.floor(255 * Math.sin(fx * Math.PI * 12));
                im.data[4*i+1] = 0;
                im.data[4*i+2] = 0;
                im.data[4*i+3] = 255;
            }
        }
        g.putImageData(im, 0, 0);
    }
render();
</script>

%%html
<canvas id="ex4"></canvas>
<script>
var g = document.querySelector('#ex4').getContext('2d');
g.canvas.width = 200;
g.canvas.height = 200;

var im = g.getImageData(0, 0, g.canvas.width, g.canvas.height);

var shader = function(x, y){
    return Math.sin(x * Math.PI * 5);
}

var render = function(){
    for(var iy = 0; iy < g.canvas.height; iy++){
        var fy = iy / (g.canvas.height - 1);
        for(var ix = 0; ix < g.canvas.width; ix++){
            var i = iy * g.canvas.width + ix;
            var fx = ix / (g.canvas.width - 1);
            var c = shader(fx, fy);
            im.data[4*i+0] = Math.floor(255 * c);
            im.data[4*i+1] = Math.floor(255 * c);
            im.data[4*i+2] = Math.floor(255 * c);
            im.data[4*i+3] = 255;
        }
    }
    g.putImageData(im, 0, 0);
}
render();
</script>