Sei stato chiarissimo... Primo punto l'immagine che hai davanti nel browser e' sul pc client...
la prima cosa che devi fare è salvare l'immagine Canvas in una stringa
Poi con una routine locale devi fare l'upload sul serve dell'immagine salvata. in questa operazione gli puoi anche cambiare il nome di arrivo....
Ora come si fa? E come hai intenzione di farlo tu? Per esempio un bottone sul form che salva l'immagine
Allora per iniziare e studiare la cosa dato che devi scrivere tu il tuo programma pero' ti posto l'esempio che segue che è funzionante... e da qui puoi partire a studiarti la cosa...
Il programma è stato preso da web e l'ho chiamato SaveCanvas.asp
e l'include che segue canvas2image.js
1.mo file SaveCanvas.asp
codice:
<!doctype html>
<html>
<meta charset="utf-8" />
<script src="canvas2image.js"></script>
<style>
    .doc {
        width: 604px;
        margin: 0 auto;
    }
    canvas {
        display: block;
        border: 2px solid #888;
    }
</style>
<body>
<div class="doc">
    <canvas width="600" height="400" id="cvs"></canvas>
    <div>
        <p>
            <button id="save">save</button> or <button id="convert">convert to</button> as: 
            <select id="sel">
                <option value="png">png</option>
                <option value="jpeg">jpeg</option>
                <option value="bmp">bmp</option>
            </select><br/>
            width : <input type="number" value="300" id="imgW" /><br/>
            height : <input type="number" value="200" id="imgH" />
        </p>

    </div>
    <div id="imgs">
        
    </div>
</div>
<script>
    var canvas, ctx, bMouseIsDown = false, iLastX, iLastY,
        $save, $imgs,
        $convert, $imgW, $imgH,
        $sel;
    function init () {
        canvas = document.getElementById('cvs');
        ctx = canvas.getContext('2d');
        $save = document.getElementById('save');
        $convert = document.getElementById('convert');
        $sel = document.getElementById('sel');
        $imgs = document.getElementById('imgs');
        $imgW = document.getElementById('imgW');
        $imgH = document.getElementById('imgH');
        bind();
        draw();
    }
    function bind () {
        canvas.onmousedown = function(e) {
            bMouseIsDown = true;
             iLastX = e.clientX - canvas.offsetLeft +  (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
             iLastY = e.clientY - canvas.offsetTop +  (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
        }
        canvas.onmouseup = function() {
            bMouseIsDown = false;
            iLastX = -1;
            iLastY = -1;
        }
        canvas.onmousemove = function(e) {
            if (bMouseIsDown) {
                 var iX = e.clientX - canvas.offsetLeft +  (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft);
                 var iY = e.clientY - canvas.offsetTop +  (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop);
                ctx.moveTo(iLastX, iLastY);
                ctx.lineTo(iX, iY);
                ctx.stroke();
                iLastX = iX;
                iLastY = iY;
            }
        };
        
        $save.onclick = function (e) {
            var type = $sel.value,
                w = $imgW.value,
                h = $imgH.value;
            Canvas2Image.saveAsImage(canvas, w, h, type);
        }
        $convert.onclick = function (e) {
            var type = $sel.value,
                w = $imgW.value,
                h = $imgH.value;
            $imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type))
        }
        
    }
    function draw () {
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, 600, 400);
        ctx.fillStyle = 'red';
        ctx.fillRect(100, 100, 50, 50);
    }
    
    
    onload = init;
</script>
</body>
</html>

poi mando il secondo file a seguire