building a typewriter with p5.js

Thanks to Allison Parrish sharing her code on https://creative-coding.decontextualize.com/text-and-type/ I am currently working on an infroamtion design project which is based on the idea of lost in translation, from the inspiration from Parrish, I programmed a typewriter which goes wrong (the letter shown upside down on the screen). I tried to use the createGraphics() and then rotate the image, but it didn't work somehow, then I used translate() and rotate() in p5.js reference, but I struggled to make the letter appears on the left top corner rather than the right bottom corner, and also I have problem with swtiching lines, letters only go to the next line if I use backspace when I type, but I would like to use ENTER to control just like we normally do.

Anyone can help fix the problem please?

    var contents = "";
    var r,g,b;
    var bell;
    var ding;
    // var img;
    var button;

    function preload(){
      soundFormats('wav');
      bell = loadSound('typing.wav');
      ding = loadSound('return.wav')
      // img = loadImage('paper.jpg');
    }

    function setup() { 
      createCanvas(600,400);
      angleMode(DEGREES);
      // image(img,0,0,600,400);
      button = createButton("Savs as image");
      button.position(610,380);
      button.mousePressed(saveImg);
    }

    function draw() {
       //background(200);
       noStroke();
       fill(r,g,b);
       translate(560,360);
       rotate(180);
       textSize(40);
       text(contents,0,0,560,360)
    }

    function keyTyped() {
      contents += key;
      r = random(255);
      g = random(255);
      b = random(255);
      bell.play();
    }

    function keyPressed() {
      if (keyCode === ENTER) {
        ding.play();
      }
    }

    function saveImg(){
      saveFrames('library/Your text', 'png', 1,1);
    }