Trying to Copy Canvas from One Page to Another

Question

I have a canvas on one page that will be edited by the user (drawn on), and I want that same canvas to appear in the next page they visit. For example, the first page (floorplan.php) is where the user can create a floor plan, and the next page (furnish.php) is where they can drag and drop furniture on the canvas.

I've already checked out this solution, but it doesn't seem to work for me (http://stackoverflow.com/questions/4405336/how-to-copy-contents-of-one-canvas-to-another-canvas-locally)

Here is my JS code from furnish.php: (my original canvas that I want to copy is called just 'canvas'). Also - I didn't have a save function in my floorplan.php code - maybe this is the issue?

<script>    
window.onload = function(){
    var canvas2 = document.getElementById( 'canvas2' );
    var context2 = canvas.getContext( "2d" );

        var destX = 0;
        var destY = 0;

        var imageObj = new Image();
        imageObj.onload = function(){
            context.drawImage(canvas, destX, destY);
        };
        imageObj.src = "images/grid.png";
    };

$( document ).ready( function() 
{               

    $( '#clear' ).click( function () 
    {
        context.clearRect( 0, 0, 700, 700); 
    } );        

} );
</script>

score 3 · Answer 1 · edited May 23 '17 at 12:11

You appear to be expecting the variable canvas to be defined on the new page. Keep in mind that when a new page is loaded the previous page (and the javascript objects for that page) are basically gone.

You will need to serialize the canvas image data, and pass it along in the URL (or somewhere) so that it can be reconstituted on the new page. See this SO question about canvas serialization.

You may also wish to consider making the two phases of your floorplan application work on the same page, so that this isn't necessary.

Trying to Copy Canvas from One Page to Another

1 Answers1