CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Poofbrayy
Poofbrayy

Reputation: 21

Display canvas image in modal based on user's choice

I already have a working template(not modal) where every time the user chooses, a drawing and color displays in canvas. Now what I needed is that before the user submits it to my database I would like a modal that display the summary form(working already) and the canvas image (my problem). It's like I just copy the image from what it looks like from the first template.

my JS for canvas display, different file: 

function display() {
 var canvas = document.getElementById('displaycanvas');
 context = canvas.getContext('2d');
 context.clearRect(0, 0, canvas.width, canvas.height);

    if(document.getElementById('color1').checked){
      context.strokeStyle="#FF0000";
    } else if(document.getElementById('color2').checked){
      context.strokeStyle="#0000FF";
    }
    if (document.getElementById('shape1').checked) {
           context.beginPath();
           context.arc(95,50,40,0,2*Math.PI);
           context.stroke();     }

    if (document.getElementById('shape2').checked) {
            context.beginPath();
            context.rect(50, 27, 50, 100);
            context.stroke();    }
   }

/*my JS w/c is same file with my HTML: */

$('#review').click(function () {
        $('#shape').html($('input[name="shape_design"]:checked').val());
        $('#color').html($('input[name="color_design"]:checked').val());
        $('#show_canvas').html($('#displaycanvas').val());
    });
<!-- Here's my HTML the first template and the modal: -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
<canvas id="displaycanvas"></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>
</form>

<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />


<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">Confirm Order</div>
            <div class="modal-body">
                <p> Shape: <span id="shape"></span> </p>
                <p> Color: <span id="color"></span> </p>
                <p> CANVAS: <span id="show_canvas"></span> </p>
                </div>
            <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div>
        </div>
    </div>
</div>

So as you can see in the modal part below the Review Button , my canvas won't show up. I have no idea what kind of code do I need to construct here. Thank you so much in advance!

Upvotes: 0

Views: 3126

Answers (1)

bobjoe
bobjoe

Reputation: 673

HTML

 <!-- Here's my HTML the first template and the modal: -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form role="form" id="showchoices" name="showchoices" method="post" onsubmit="return entry_check()" action="/user/ps/add/">
    <canvas id="displaycanvas"></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>
</form>

<input type="button" name="btn" value="Review" id="review" data-toggle="modal" data-target="#con_rev" class="btn btn-primary" />

<div class="modal fade" id="con_rev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">Confirm Order</div>
            <div class="modal-body">
                <p> Shape: <span id="shape"></span> </p>
                <p> Color: <span id="color"></span> </p>
                <p> CANVAS: <canvas id="show_canvas"></canvas> </p>
                </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div>
        </div>
    </div>
</div>

JS

$('#review').click(function () {
    $('#shape').html($('input[name="shape_design"]:checked').val());
    $('#color').html($('input[name="color_design"]:checked').val());
    // Get the canvas and contexts
    var canvasSource = document.getElementById('displaycanvas');
    var contextSource = canvasSource.getContext('2d');
    var canvasShow = document.getElementById('show_canvas');
    var contextShow = canvasShow.getContext('2d');
    // Read the data from the first canvas beginning at 0,0 and going to canvas.width, canvas.height
    var image = contextSource.getImageData(0, 0, canvasSource.width, canvasSource.height);
    // "draw" the image data onto the second canvas beginning at 0,0
    contextShow.putImageData(image, 0, 0);
}

HTML5 Canvas Image Data HTML5 Canvas Put Image Data

Upvotes: 2

Related Questions