%%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>