HTML 5 Canvas and JS

Question

This solution works, the problem is when the user clicks on submit the item being drawn just keeps overlapping the last one. So I can click on the halfcircle radio button and then the quadratic curve and they just overlap one another.

How could I mkae it so the items dont overlap and only one is shown at a time

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <form>
        <input type="radio" name="radio" id="rd1" value="Show Arc" checked="checked"/>Show Arc<br>
        <input type="radio" name="radio" id="rd2" value="Show Half Circle"/>Show Half Circle<br>
        <input type="radio" name="radio" id="rd3" value="Show Circle"/>Show Circle<br>
        <input type="radio" name="radio" id="rd4" value="Show X"/>Show X<br>
        <input type="radio" name="radio" id="rd5" value="Show Quadratic Curve"/>Show Quadratic Curve<br><br>
        <input type="submit" id="button" value="Submit"/>
    </form>
    <canvas id="canvas" width="500" height="500">
        Get a new browser
    </canvas>
    <script src="Lesson3.js"></script>
</body>
</html>

JS

var button = document.getElementById('button');
var rd1 = document.getElementById('rd1');
var rd2 = document.getElementById('rd2');
var rd3 = document.getElementById('rd3');
var rd4 = document.getElementById('rd4');
var rd5 = document.getElementById('rd5');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

button.addEventListener('click', function(){
if(rd1.checked){
showArc();
}
else if(rd2.checked){
showHalfCircle();
}
else if(rd3.checked){
showCircle();
}
else if(rd4.checked){
showX();
}
else if(rd5.checked){
showQuadraticCurve();
}
else{ alert('nothing to show');
}
}, false);


function showArc(){
context.beginPath();
context.arc(250,250,200,Math.PI/180*90,Math.PI/180*270,false);    
context.stroke();
}

function showHalfCircle(){
context.beginPath();
context.arc(250,250,200,Math.PI/180*90,Math.PI/180*270,false);
context.closePath();
context.stroke();
}

function showCircle(){
context.beginPath();
context.arc(250, 250, 200, 0, Math.PI*2, true); 
context.closePath();
context.fill();
}

function showX(){
context.beginPath();
context.moveTo(0,0);
context.lineTo(500,500);
context.stroke();
context.moveTo(500,0);
context.lineTo(0,500);
context.stroke();
}

function showQuadraticCurve(){
context.beginPath();
context.moveTo(130,130);
context.quadraticCurveTo(150.8, 130, 160.6, 150.5);
context.quadraticCurveTo(190, 250, 210.5, 160.5);
context.quadraticCurveTo(240, 100.5, 290, 70.5);
context.stroke();
}

Your question asks Way too much for a Stackoverflow question!. Instead, try to do a bit-of-Google plus some coding and come back if you have specific coding questions. ...and enjoy the learning along the way! Cheers! — markE, Feb 26 '14 at 02:29
My bad, let me put my code and see if you can help me figure out where I am going wrong — user2939808, Feb 26 '14 at 02:35

score 0 · Accepted Answer · answered Feb 26 '14 at 03:16

Not sure why you would need the elements within a form. Nonetheless - I began getting a solution for you before you pasted in your current code so I opted for the much simpler svg.js library and a bit of jQuery to make things quicker for me to explain. You should be able to simply transform what I've done to suit your needs.

http://jsfiddle.net/hv6s2/

Here's the code too - excluding the library scripts

<!-- HTML -->
<div id="drawing"></div>

<form name="imageselect">
    <ul>
        <li><label><input type="radio" name="image" value="http://lorempixel.com/500/500/sports/1/" /> Image 1</label></li>
        <li><label><input type="radio" name="image" value="http://lorempixel.com/500/500/sports/2/" /> Image 2</label></li>
        <li><label><input type="radio" name="image" value="http://lorempixel.com/500/500/sports/3/" /> Image 3</label></li>
        <li><label><input type="radio" name="image" value="showArc" /> Arc</label></li>
        <li><label><input type="radio" name="image" value="showHalfCircle" /> Half Circle</label></li>
    </ul>
    <input type="submit" name="select" />
</form>

Put this in a .js file

// Javascript
// create your own external script references to http://www.svgjs.com/
// and http://www.jquery.com
jQuery(function() {
    /* create an svg drawing */
    var canvas = SVG('drawing').size(500,500),

    /* perhaps you wanted to load an image? */
        image;

    /* set a bunch of default shapes references */
    var shapes = {
        showArc: function(canvas) {
            // `this` is reference to the form
            // do your drawing...
            console.log('showArc');
        },
        showHalfCircle: function(canvas) {
            // `this` is reference to the form
            // do your drawing...
            console.log('showHalfCircle');
        }
    }

    jQuery('form').on('submit', function(e) {
        e.preventDefault();

        // start over
        canvas.clear();

        jQuery.each($('form').serializeArray(), function(i, field) {
            if (field.name == 'image') {
                func = field.value;
                return false;
            }
        });

        if (jQuery.isFunction(shapes[func])) {
            shapes[func].apply(this, canvas);
        } else {
            image = canvas.image(func, 500, 500);
        }
    });
});

I did get it working the way I did it. The problem was it keeps putting on image over antoher and another.....do you see where i am going wrong in my code? Thanks by the way for putting in the effort for me. — user2939808, Feb 26 '14 at 03:26
I'm pitching it's a matter of clearing the canvas (or at least the current shape) before drawing a new one. Quick search led me to another answer on SO: http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing — Matt, Feb 26 '14 at 03:37

HTML 5 Canvas and JS

1 Answers1