var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');

ctx.strokeStyle = "rgb(0,0,1000)";
ctx.fillStyle="#FFCC99";
ctx.fillRect(50,50,500,350);
ctx.moveTo(50,225);
ctx.lineTo(550,225);

ctx.moveTo(300,50);
ctx.lineTo(300,400);


ctx.moveTo(300,50);
ctx.lineTo(300,400);
ctx.stroke();


    ctx.font = "10pt Calibri,Geneva,Arial";
 
    ctx.fillStyle = "rgb(51,255, 255)";
    ctx.strokeText("0,5 UI", 550,225 );
    ctx.strokeText("-0,5 UI", 15, 225);
    ctx.strokeText("0 ", 300, 225);

    ctx.strokeText("EYE MAGNITUDE", 270, 30);
    ctx.strokeText("mV-", 300, 410);
    ctx.strokeText("mV+", 300, 50);
    
    ctx.strokeText("-200 mV", 40, 410);
    ctx.strokeText("+200mV", 40, 50);

    ctx.strokeStyle = "rgb(0,0,1000)";
    ctx.fillRect (240,185, 120, 80);
  
    ctx.moveTo(200,225);
    ctx.lineTo(240,185);

    ctx.moveTo(200,225);
    ctx.lineTo(240,265);



    ctx.moveTo(240,185);
    ctx.lineTo(360,185);

    ctx.moveTo(240,265);
    ctx.lineTo(360,265);




    ctx.moveTo(360,185);
    ctx.lineTo(400,225);

    ctx.moveTo(360,265);
    ctx.lineTo(400,225);
    ctx.stroke();
    ctx.fill();

    ctx.fillStyle = "rgb(51,255, 255)";   
    ctx.moveTo(200,225);
    ctx.lineTo(240,185);
    ctx.lineTo(240,265);

     ctx.moveTo(360,185);
     ctx.lineTo(400,225);
     ctx.lineTo(360,265);
    
    ctx.fill();