"

From 2011.igem.org

function initCanvas() { // Draw axiis var canvas = document.getElementById("dnaVis"); var context = canvas.getContext("2d");

for(var x = 15.5; x < canvas.width; x += 5) { context.moveTo(x, 0); context.lineTo(x, 150); }

for(var y = 0.5; y < 150; y += 37) { context.moveTo(15.5, y); context.lineTo(canvas.width, y); }

context.strokeStyle = "#eee"; context.stroke();

context.font = "12px 'Droid Sans Mono'"; context.fillText("A", 1, 23); context.fillText("C", 1, 60); context.fillText("G", 1, 100); context.fillText("T", 1, 135); }

var numBases = 0; function updateCanvas(codon) { var canvas = document.getElementById("dnaVis"); var context = canvas.getContext("2d");

for(var i = 0; i < codon.length; i++) { var x = numBases * 5 + 15.5; var y = 0;

if(codon[i] == "C") y += 37; else if(codon[i] == "G") y += 74; else if(codon[i] == "T") y += 111;

if(x + 5 > canvas.width) { canvas.width += 800; initCanvas(); } context.fillRect(x, y, 5, 37); numBases++; } }

function clearCanvas() { var canvas = document.getElementById("dnaVis"); var context = canvas.getContext("2d");

 context.clearRect(0, 0, canvas.width, canvas.height);
 var w = canvas.width;
 canvas.width = 1;
 canvas.width = w;

}