var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
gate_and(400,400,90,"A","B","C");
gate_and(100,300,90,"A1","A2","A3");
gate_and_link (400,400,100,300,90,1);
gate_and(100,500,90,"B1","B2","B3");
gate_and_link (400,400,100,500,90,5);
//
function gate_and_link (xright1,xtop1,xright2,xtop2,h,xline) {
ctx.beginPath();
ctx.lineWidth = '3';
ctx.moveTo(h * 1.5 + xright2 + 50,h/2 + xtop2);
ctx.lineTo(xright1 - 50,h/6 * xline + xtop1);
ctx.stroke();
}
//
function gate_and(xright,xtop,h,i1,i2,o1) {
ctx.beginPath();
ctx.lineWidth = '3';
ctx.arc(h + xright,h/2 + xtop,h/2,1.5*(22/7),0.5*(22/7));
ctx.stroke();
//
ctx.beginPath();
ctx.lineWidth = '3';
ctx.moveTo(h + xright,0 + xtop);
ctx.lineTo(0 + xright,0 + xtop);
ctx.lineTo(0 + xright,h + xtop);
ctx.lineTo(h + xright,h + xtop);
ctx.stroke();
//
ctx.beginPath();
ctx.lineWidth = '3';
ctx.moveTo(xright,h/6 * 1 + xtop);
ctx.lineTo(xright - 50,h/6 * 1 + xtop);
ctx.moveTo(xright,h/6 * 5 + xtop);
ctx.lineTo(xright - 50,h/6 * 5 + xtop);
ctx.moveTo(h * 1.5 + xright,h/2 + xtop);
ctx.lineTo(h * 1.5 + xright + 50,h/2 + xtop);
ctx.stroke();
//
ctx.font = "24px Arial";
ctx.fillText(i1,xright - 40,xtop + h/6 * 1 - 2);
ctx.fillText(i2,xright - 40,xtop + h/6 * 5 - 2);
ctx.fillText(o1,xright + h * 1.5 + 20,xtop + h/2 - 2);
}
