从表单输入中绘制画布shap

Question

I'm building a website with form, the customer can design his own sign and output will be product code, product price and shape for the product but in another page, my problem is I can't use the pr entered data in the result page, the user will enter height, width, number of rows and columns and the canvas shape must be drawn as users inputs in php.

from THIS PAGE, when click submit the result page shows

[my-custom-table] --> a plugin I'm using to import data user entered in the form page

<canvas id="canvas" style="border: 2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "</p>
<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px'><p>" +
                  "</p>
<table border='1'>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<p>" +
               "</div>
<p>" +
             "</foreignObject>" +
           "</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>

---

plugin code

<?php
/**
 * Plugin Name: Smart Forms - Query Api Demo
 */

add_shortcode('my-custom-table','smart_forms_demo_custom_table');

function smart_forms_demo_custom_table(/** @noinspection PhpUnusedParameterInspection */ $attr,$content)

{ //these are form fields ids
    require_once SMART_FORMS_API;
    $query=new SmartFormsQuery(1);

    $query->AddField('rnField01');

    $query->AddField('rnField02');

    $query->AddField('rnField03');
    $query->AddField('rnField04');
    $query->AddField('rnField06');
    $query->AddField('rnField07');
    $query->AddField('rnField08');
    $query->AddField('EB');
    $query->AddField('EP');
    $query->AddField('EL');
    $query->AddField('CC');
    $query->AddField('C');
    $query->AddField('Y');
    $query->AddField('X');
    $query->AddField('nocp2');
    $query->AddField('nocp3');
    $query->AddField('nocp4');

    $query->AddCondition('_UserId','=',get_current_user_id());

    $result= $query->GetResults();

    echo "<h4>your customized sign</h4>";
    echo "<strong>Product Code:</strong>".esc_html($result[0]['Y']).'<br/>';
    echo "<strong>Product Price:</strong>".esc_html($result[0]['X']).'<br/>';

}