Mam taki kod na rysowanie oparty o js i teraz pytanie jak wygenerowac z tego obrazek jpg/png

<?xml version="1.0" encoding="iso-8859-2"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-type" content="text/html;
    charset=iso-8859-2" />
    <meta name="Author" content="lockoom" />
    <meta name="Authoring_tool" content="CS Pajączek 2000 PRO
    v4.8.1" />
    <title></title>
    <style type="text/css">
    <!--
    td {
       overflow: hidden;
       font-size: 0px;
       color: white;
       /* tutaj wpisz wysokosc i szerokosc pojedynczej komorki tabeli */
       height: 10px;
       width: 10px
    }
    -->
    </style>
    <script type="text/javascript" language="JavaScript">
    <!--
    // tu podaj liczbe wierszy i kolumn tabeli oraz domyslny kolor olowka i papieru
    rows = 20;
    cols = 20;
    pencilColor = "#000000";
    paperColor = "#ffffff";

    // kilka zmiennych pomocniczych
   var cells = rows * cols;
   var doc = window.document;
   var  el = doc.all ? doc.all : doc.getElementsByTagName("*");

    // f. ustawiajaca zdarzenie onMouseOver dla komorek tabeli oraz kolor
    "papieru"
    function init(){
       draw = false;
       el["paper"].style.background = paperColor;
       for (i = 0; i < cells; i++){
          n = "cell" + i;
          el[n].onmouseover = function(){
             if(draw) this.style.background = pencilColor;
          }
          el[n].onclick = function(){
       if(draw){
                draw = false;
       }
       else{
           draw = true;
                this.style.background = pencilColor;
       }
          }
       }
    }

    // f. czyszczaca papier
    function clr(){
       for (i = 0; i < cells; i++){
          n = "cell" + i;
          el[n].style.background = paperColor;
       }
    }
    // -->
	

    </script>
    </head>
    <body onLoad="init();">

    <b>Lewy klik rozpoczyna i kończy rysowanie.</b>
       <table border="1" cellpadding="0"
    cellspacing="0" id="paper">
          <script type="text/javascript"
    language="JavaScript">
          <!--
             // ten skrypcik rysuje tabele na podstawie podanej ilosci kolumn i wierszy
             for(i = 0, n = 0; i < rows; i++){
                doc.write("<tr>");
                for(j = 0; j < cols; j++, n++){
                   doc.write("<td id='cell", n, "'>.</td>");
                }
                doc.write("</tr>");
             }
          // -->
          </script>

       </table>
       Wybierz kolor pisaka:
       <select onchange="pencilColor = this.value"
    name="color">
          <option value="#000000"
    selected="selected">Czarny</option>
          <option value="#ffffff">Biały</option>
          <option value="#ff0000">Czerwony</option>
          <option value="#008000">Zielony</option>
          <option value="#0000ff">Niebieski</option>
          <option value="#ffff00">Żółty</option>
          <option value="#00ff00">Jasnozielony</option>
          <option value="#00ffff">Turkusowy</option>
       </select> <br>
       Wybierz kolor papieru:
       <select onchange="paperColor = this.value; clr()"
    name="color">
          <option value="#000000">Czarny</option>
          <option value="#ffffff"
    selected="selected">Biały</option>
          <option value="#ff0000">Czerwony</option>
          <option value="#008000">Zielony</option>
          <option value="#0000ff">Niebieski</option>
          <option value="#ffff00">Żółty</option>
          <option value="#00ff00">Jasnozielony</option>
          <option value="#00ffff">Turkusowy</option>
       </select> <br>
       <input type="button" value="Wyczyść"
    onClick="clr();">
    </body>
    </html>

Znalazlem taka funkcje do zapisu oparta o js, tylko teraz nie wiem jak to polaczyc.

<script>
            function uploadEx() {
                var canvas = document.getElementById("canvas");
                var dataURL = canvas.toDataURL("image/png");
                document.getElementById('hidden_data').value = dataURL;
                var fd = new FormData(document.forms["form1"]);
 
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'wykonaj.php', true);
 
                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        console.log(percentComplete + '% uploaded');
                        alert('Succesfully uploaded');
                    }
                };
 
                xhr.onload = function() {
 
                };
                xhr.send(fd);
            };
        </script>

oraz plik wykonaj

<?php
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

Dodatkowo mialem prawdopodobnie uzyc czegos takiego jak pobieranie kolumn i wierszy do czego mam taka pentle:

var result = [];

for(var i = 0, rows = table.rows; i < rows.length; ++i)
{
    var row = rows[i];
    
    result[i] = [];
    
    for(var j = 0, cells = row.getElementsByTagName('td'); j < cells.length; ++i)
    {
        var cell = cells[j];
        
        result[i][j] = getComputedStyle(cell)['background-color'];
    }
}

Niestety nie bardzo umiem js, a potrzebna mi taka rzecz.
Bede wdzieczny jesli ktos pomoze mi ktos to skleic w calosc lub wskaze droge jak to zrobic. Jesli na internecie sa jakies turoiale jak wykonac taka czynnosc to tez bede wdzieczny.(nie chodzi tu o kursy js)

dodanie znaczników <code class="javascript"> i <code class="php"> - @furious programming