'Create transparent background image from text input

i just trying to do create image from text input value which i want to transparent background, but somehow somewhere there is a mistake which i couldn't find. http://jsfiddle.net/e4f3Lc6n/

When i change the var backgroundColor = "transparent"; to any color it works like a charm. but you can see in jsfiddle link it is writing over the previous text when it is transparent. For my project there should be no color background. Where am i making a mistake?

Thanks for any help...

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Text Arranger</title>

<link rel="stylesheet"  href="../poetry/poetry_stylesheet.css" type="text/css"/>
<link rel="stylesheet"  href="../index_stylesheet.css" type="text/css"/>

    <script>
          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

          ga('create', 'UA-46245008-1', 'peteymac.com');
          ga('send', 'pageview');
    </script>


<script type="text/javascript">
window.addEventListener("load", eventWindowLoaded, false);      

var Debugger = function() {};
Debugger.log = function(message) {
    try {
        console.log(message);
    } catch (exception) {
            return; 
        }
}

function eventWindowLoaded () {
    canvasApp();
}

function canvasSupport () {
    return !!document.createElement("canvas").getContext;
}

function canvasApp () {
    Debugger.log("Drawing Canvas");
    
    if(!canvasSupport()) {
        return;
    }
    var theCanvas = document.getElementById('canvasOne');
    var context = theCanvas.getContext('2d');
    
    WIDTH = theCanvas.width;
    HEIGHT = theCanvas.height;
            
    var message = "canberk";
    var fontSize = "50";
    var fontFace = "serif";
    var fontWeight = "normal"
    var fontStyle = "normal";
    
    var textFillColor = "#ff0000";

    var backgroundColor = "transparent";
    var textStrokeColor = "#000000";

    var fillOrStroke = "fill";
    var textBaseline = "middle";
    var textAlign = "center";
    


    
    var fillType = "colorFill";

    

    // This is the event handler for listening for a key up event in the text box form
    // It will call the textBoxChanged function to update the text in the canvas
    
    var formElement = document.getElementById("textBox");
    formElement.addEventListener("keyup", textBoxChanged, false);
    
    formElement = document.getElementById("textSize");
    formElement.addEventListener("change", textSizeChanged, false); 
    
    formElement = document.getElementById("textFont");
    formElement.addEventListener("change", textFontChanged, false);     
    
    formElement = document.getElementById("fontWeight");
    formElement.addEventListener("change", fontWeightChanged, false);       
    
    formElement = document.getElementById("fontStyle");
    formElement.addEventListener("change", fontStyleChanged, false);    

    formElement = document.getElementById("fillType");
    formElement.addEventListener("change", fillTypeChanged, false);
    
    formElement = document.getElementById("textFillColor");
    formElement.addEventListener("change", textFillColorChanged, false);
    
    
        

    


    

    





        
    formElement = document.getElementById("createImageData");
    formElement.addEventListener("click", createImageDataPressed, false);
    
    drawScreen();       
    
    function drawScreen() {
    
        var metrics = context.measureText(message);
        var textWidth = metrics.width;
        var xPosition =  WIDTH / 2
        var yPosition =  HEIGHT / 2;
    
    // Draws the Text Box
        context.globalAlpha = 1.0;
        
    
    
        context.fillStyle = backgroundColor;
        context.fillRect(0,0,WIDTH,HEIGHT);
        
    

        
    // Draws the actual text
    
    
    
        
        
        context.font = fontWeight + " " + fontStyle + " " + fontSize + "px " + fontFace;
        context.textBaseline = textBaseline;
        context.textAlign = textAlign;

        var tempColor;
        switch(fillType) {
            case "colorFill":
                Debugger.log("Color Fill");
                tempColor = textFillColor;
                break;
            case "linearGradient":
                Debugger.log("Linear Gradient");
                var linGradient = context.createLinearGradient(xPosition-textWidth/2, yPosition, xPosition+textWidth/2, yPosition);
                linGradient.addColorStop(0, textFillColor);
            
                tempColor = linGradient;
                break;
            case "radialGradient":
                Debugger.log("Radial Gradient");
                var radGradient = context.createRadialGradient(xPosition, yPosition, 1, xPosition, yPosition, textWidth/2);
                radGradient.addColorStop(0, textFillColor);
                
                tempColor = radGradient;
            break;
            
        }
    
        switch(fillOrStroke) {
            case "fill":
                context.fillStyle = tempColor;
                context.fillText(message, xPosition, yPosition);
                break;
            case "stroke":
                context.strokeStyle = textStrokeColor;
                context.strokeText(message, xPosition, yPosition);
                break;
            case "both":
                context.fillStyle = tempColor;
                context.fillText(message, xPosition, yPosition);
                context.strokeStyle = textStrokeColor;
                context.strokeText(message, xPosition, yPosition);
                break;
        }
    
    }
        
        function textBoxChanged(e) {
            var target = e.target;
            message = target.value;
            drawScreen();
        }
            
        function textSizeChanged(e) {
            var target = e.target;
            fontSize = target.value;
            drawScreen();
        }
        
        function textFontChanged(e) {
            var target = e.target;
            fontFace = target.value;
            drawScreen();
        }
        
        function fontWeightChanged(e) {
            var target = e.target;
            fontWeight = target.value;
            drawScreen();
        }
        
        function fontStyleChanged(e) {
            var target = e.target;
            fontStyle = target.value;
            drawScreen();
        }

        function fillTypeChanged(e) {
            var target = e.target;
            fillType = target.value;
            drawScreen();
        }
        
        function textFillColorChanged(e) {
            var target = e.target;
            textFillColor = "#" + target.value;
            drawScreen();
        }
        
    
        
        

        
    
    
        
    
        
    
    
        
        function createImageDataPressed(e) {
            var imageDataDisplay = document.getElementById("imageDataDisplay");
            imageDataDisplay.value = theCanvas.toDataURL();
            
    }
}

</script>
<style> 

#canvasOne { 
    
    box-shadow: -4px -4px 5px #aaaaaa; 
    display: block;
    margin-left: -60px;
}
form {
    margin-top: 40px;
}

</style>
</head>
<body>

<canvas id="canvasOne" width="1000" height="250">
    Your browser does not support Canvas.
</canvas>
<form>
    Text: <input id="textBox" value="canberk"/>
    <br/>
    Text Font: <select id="textFont">
        <option value = "serif">Serif</option>
        <option value = "sans-serif">Sans-Serif</option>
        <option value = "cursive">Cursive</option>
        <option value = "fantasy">Fanatasy</option>
        <option value = "monospace">Monospace</option>
    </select>
    Font Weight: <select id="fontWeight">
        <option value="normal">Normal</option>
        <option value="bold">Bold</option>      
        <option value="bolder">Bolder</option>      
        <option value="lighter">Lighter</option>        
    </select>
    Font Style: <select id="fontStyle">
        <option value="normal">Normal</option>
        <option value="italic">Italic</option>      
        <option value="oblique">Oblique</option>
    </select>
    <br/>
    Text Size: <input type="range" id="textSize"
                min="0"
                max="200"
                step="1"
                value="50"/>
    <br/>
    Fill Type: <select id="fillType">
        <option value="colorFill">Color Fill</option>
        <option value="linearGradient">Linear Gradient</option>
        <option value="radialGradient">Radial Gradient</option>
    </select>
    <br/>
    Text Fill Color: <input id="textFillColor" value="ff0000"/>



    


    <input type="button" id="createImageData" value="Create Data Image">
    <br/>
    <textarea id="imageDataDisplay" rows=5 cols=100></textarea>
</form>
</div>

</body>
</html>

Solution 1:^[1]

I think the solution you need is:

function drawScreen() {
   context.clearRect(0, 0, WIDTH, HEIGHT);
   ...
   ...
 }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rolinger

'Create transparent background image from text input

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]