CPU Adder

by Cromato

HTML

<html>
	<head></head>
	<body>
		<canvas
    	id="myCanvas"
    	width=800
      height=500
    	style="border:
      1px solid black">
      
		</canvas>

	</body>
</html>

JavaScript

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

function show(i) {
  ctx.clearRect(0, 0, 1000, 500);
  //Faz o quadrado da CPU
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(50, 450);
  ctx.lineTo(450, 450);
  ctx.lineTo(450, 50);
  ctx.lineTo(50, 50);
  ctx.stroke();

  //Escreve o texto
  ctx.font = "30px Arial";
  ctx.fillText("CPU", 210, 80);

  //Quadradinhos do ciclo
  ctx.beginPath();
  ctx.moveTo(80, 120);
  ctx.lineTo(80, 150);
  ctx.lineTo(150, 150);
  ctx.lineTo(150, 120);
  ctx.lineTo(80, 120);
  ctx.stroke();
  ctx.font = "15px Arial";
  ctx.fillText("Fetch", 90, 140);

  ctx.beginPath();
  ctx.moveTo(80, 170);
  ctx.lineTo(80, 200);
  ctx.lineTo(150, 200);
  ctx.lineTo(150, 170);
  ctx.lineTo(80, 170);
  ctx.stroke();
  ctx.font = "15px Arial";
  ctx.fillText("Decode", 90, 190);

  ctx.beginPath();
  ctx.moveTo(80, 220);
  ctx.lineTo(80, 250);
  ctx.lineTo(150, 250);
  ctx.lineTo(150, 220);
  ctx.lineTo(80, 220);
  ctx.stroke();
  ctx.font = "15px Arial";
  ctx.fillText("Execute", 90, 240);

  // Componentes da CPU

  ctx.font = "15px Arial";
  ctx.fillText("Programme Counter:", 295, 120);
  ctx.beginPath();
  ctx.moveTo(290, 130);
  ctx.lineTo(290, 170);
  ctx.lineTo(440, 170);
  ctx.lineTo(440, 130);
  ctx.lineTo(290, 130);
  ctx.stroke();
  if (i == 0) {

  } else if (i <= 3) {
    ctx.fillText(0, 295, 155);
  } else if ((i - 3) % 9 <= 3) {
    ctx.fillText(1, 295, 155);
  } else if ((i - 3) % 9 <= 6) {
    ctx.fillText(2, 295, 155);
  } else if ((i - 3) % 9 <= 9) {
    ctx.fillText(3, 295, 155);
  } else {
    ctx.fillText("ERRO", 295, 155);
  }


  ctx.fillText("Instruction Register:", 295, 220);
  ctx.beginPath();
  ctx.moveTo(290, 230);
  ctx.lineTo(290, 270);
  ctx.lineTo(440, 270);
  ctx.lineTo(440, 230);
  ctx.lineTo(290, 230);
  ctx.stroke();
  if (i == 0) {

  } else if (i <= 3) {
    ctx.fillText("LOAD 6", 295, 255);
  } else if ((i - 3) % 9 == 0) {
    ctx.fillText("JUMP 1", 295, 255);
 ...