Q:

deleting text doesn't work when sending text from form to text in canvas element

Right now i have a form where i can enter some text and it appears in a canvas element,
however when i press backspace the text doesn't go away anymore and when i retype text it appears on top of the old text.
Is there a way to get the canvas element to respond to deleting text also?
<!DOCTYPE html>
<html>

 <title>dropIn Print Generator</title>

<body>
<h1>dropIn Print Generator</h1>

<form method="post" action="run.php">
<p>brand name
<input type="text" id="brand" onkeyup="showBrand(this.value)" /></p>
<p>product name
<input type="text" id="product" onkeyup="showProductName(this.value)" /></p>
<p>product details
<input type="text" id="details" onkeyup="showProductDetail(this.value)" /></p>
<p>product sku
<input type="text" id="sku" /></p>
<p>product image
<input type="file" id="image" /></p>

</form>

<canvas id="mainCanvas" width="400" height="600" style="border:1px solid #000000;"></canvas>

<script>
    var canvas = document.getElementById('mainCanvas');
    var context = canvas.getContext('2d');

    // begin upper shape
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(400, 0);
    context.lineTo(400, 300);
    context.lineTo(380, 30);
    context.lineTo(0, 50);
    context.lineTo(0, 0);

    // complete upper shape
    context.closePath();
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    context.fillStyle = 'black';
    context.fill();
    context.stroke();

    // begin bottom shape
    context.beginPath();
    context.moveTo(400, 600);
    context.lineTo(200, 600);
    context.lineTo(400, 585);
    context.lineTo(400, 600);

    // complete bottom shape
    context.closePath();
    context.lineWidth = 1;
    context.strokeStyle = 'black';
    context.fillStyle = 'black';
    context.fill();
    context.stroke();

    function showBrand(str){  
        context.fillStyle = 'black';
        context.font = '20px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText(str, 30, 100);          
        }

    function showProductName(str){   
        context.fillStyle = 'black';
        context.font = '30px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText(str, 30, 135);
        }

    function showProductDetail(str){   
        context.fillStyle = 'black';
        context.font = '20px sans-serif';
        context.textBaseline = 'bottom';
        context.fillText(str, 30, 160);
      }

  </script>
</body>
</html>

A:

You need to clear the canvas before each time you paint some new text onto it, otherwise anything you've already drawn on the canvas will remain and you'll be drawing on top of it.
function clearCanvas() {
    // Redraw the background color over the top of the old text to 'clear' it.
    context.fillStyle = '#fff';
    context.fillRect(0, 0, canvas.width, canvas.height);
}

Add a call to this function to the start of your other 3 drawing functions.

