html5 canvas display shapes based on radio

Question

I would like to display one shapes at a time, I'm having trouble how to remove the chosen radio.

  function display() { var canvas = document.getElementById('displaycake_sketch'); context = canvas.getContext('2d'); //context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); if (document.getElementById('color1').checked) { context.strokeStyle = "#FF0000"; } else if (document.getElementById('color2').checked) { context.strokeStyle = "#0000FF"; } if (document.getElementById('shape1').checked) { context.arc(95, 50, 40, 0, 2 * Math.PI); context.stroke(); } if (document.getElementById('shape2').checked) { context.rect(50, 27, 50, 100); context.stroke(); } } $(function() { var drawObject = $('#displaycake_sketch').sketch(); var oldRedraw = drawObject.data('sketch').redraw; drawObject.data('sketch').redraw = function() { oldRedraw.call(this); display(); } $(".tools a").eq(0).attr("style", "color:#fba557"); $(".tools a").click(function() { $(".tools a").removeAttr("style"); $(this).attr("style", "color:#000"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script> <canvas id="displaycake_sketch"></canvas> <div> <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="display()"/> O <input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="display()"/> [] </div> <div> <input type="radio" id="color1" name="color_design" value="RED" onchange="display()"/> RED <input type="radio" id="color2" name="color_design" value="BLUE" onchange="display()"/> BLUE </div> <div class="tools"> <a href="#displaycake_sketch" class="btn btn-primary" data-tool="marker"> Marker</a> <a href="#displaycake_sketch" class="btn btn-primary" data-tool="eraser"> Eraser</a> </div> 

I'm fine with the free draw (sketch thingy), but just the display of the shapes...

Hope somebody could help me... I'm getting confused all these codes that I've got from different sources. Thank you in advance..

Answer 1

Add context.clearRect(0, 0, canvas.width, canvas.height); to clear the canvas before drawing a new shape

 function display() { var canvas = document.getElementById('displaycake_sketch'); context = canvas.getContext('2d'); //context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); if (document.getElementById('color1').checked) { context.strokeStyle = "#FF0000"; } else if (document.getElementById('color2').checked) { context.strokeStyle = "#0000FF"; } } function drawShape() { var canvas = document.getElementById('displaycake_sketch'); context = canvas.getContext('2d'); //context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); if (document.getElementById('shape1').checked) { context.clearRect(0, 0, canvas.width, canvas.height); context.arc(95, 50, 40, 0, 2 * Math.PI); context.stroke(); } if (document.getElementById('shape2').checked) { context.clearRect(0, 0, canvas.width, canvas.height); context.rect(50, 27, 50, 100); context.stroke(); } } $(function() { var drawObject = $('#displaycake_sketch').sketch(); var oldRedraw = drawObject.data('sketch').redraw; drawObject.data('sketch').redraw = function() { oldRedraw.call(this); } $(".tools a").eq(0).attr("style", "color:#fba557"); $(".tools a").click(function() { $(".tools a").removeAttr("style"); $(this).attr("style", "color:#000"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://intridea.github.io/sketch.js/lib/sketch.js"></script> <canvas id="displaycake_sketch"></canvas> <div> <input type="radio" id="shape1" name="shape_design" value="CIRCLE" onchange="drawShape()"/> O <input type="radio" id="shape2" name="shape_design" value="RECTANGLE" onchange="drawShape()"/> [] </div> <div> <input type="radio" id="color1" name="color_design" value="RED" onchange="display()"/> RED <input type="radio" id="color2" name="color_design" value="BLUE" onchange="display()"/> BLUE </div> <div class="tools"> <a href="#displaycake_sketch" class="btn btn-primary" data-tool="marker"> Marker</a> <a href="#displaycake_sketch" class="btn btn-primary" data-tool="eraser"> Eraser</a> </div>