canvas and MySQL DB

I am trying to develop a small application for the management of users of a clinic, and I am faced with a problem and it is as follows. This clinic has to make its patients sign a sheet of paper, which is the data protection law in Spain and to save paper, ink etc. The clinic has offered to develop the application and in passing, the data protection law, among other things, can be signed digitally. Well, up here pretty well. For the firm I have developed a small box with "canvas" of html5 and to this I have assigned a small javascript script, attached code below. But now, it is interesting to keep this signature of that person in a database or as a separate file in the hosting ... And my question is, how can I do this part? I've been reading about what can be done with this function

canvas.toDataURL();

but I do not get it and I do not find anything really useful for me. Can you lend me a hand? Thanks in advance.

I've attached code so far.

1st HTML

<canvas id="canvas"> 
        Su navegador no soporta canvas
</canvas>

2nd JavaScript code for the drawing, and mouse events for the canvas

<script type="text/javascript">
        var limpiar = document.getElementById("limpiar");
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var cw = canvas.width = 150, cx = cw / 2;
        var ch = canvas.height = 150, cy = ch / 2;

        var dibujar = false;
        var factorDeAlisamiento = 5;
        var trazados = [];
        var puntos = [];
        ctx.lineJoin = "round";


        limpiar.addEventListener('click', function(evt){
            dibujar = false;
            ctx.clearRect(0, 0, cw, ch);
            trazados.length = 0;
            puntos.length = 0;
        }, false);


        canvas.addEventListener('mousedown', function(evt) {
             dibujar = true;
             //ctx.clearRect(0, 0, cw, ch);
             ctx.beginPath();
        }, false);

        canvas.addEventListener('mouseup', function(evt) {
            dibujar = false;
        }, false);

        canvas.addEventListener("mouseout", function(evt) {
              dibujar = false;
        }, false);

        canvas.addEventListener("mousemove", function(evt) {
            if (dibujar) {
                var m = oMousePos(canvas, evt);
                puntos.push(m);
                ctx.lineTo(m.x, m.y);
                ctx.stroke();
              }
        }, false);

        function reducirArray(n,elArray) {
            var nuevoArray = [];
             nuevoArray[0] = elArray[0];
             for (var i = 0; i < elArray.length; i++) {
                if (i % n == 0) {
                  nuevoArray[nuevoArray.length] = elArray[i];
                }
              }
            nuevoArray[nuevoArray.length - 1] = elArray[elArray.length - 1];
            Trazados.push(nuevoArray);
        }

        function calcularPuntoDeControl(ry, a, b) {
            var pc = {}
            pc.x = (ry[a].x + ry[b].x) / 2;
            pc.y = (ry[a].y + ry[b].y) / 2;
            return pc;
        }

        function alisarTrazado(ry) {
            if (ry.length > 1) {
            var ultimoPunto = ry.length - 1;
            ctx.beginPath();
            ctx.moveTo(ry[0].x, ry[0].y);
            for (i = 1; i < ry.length - 2; i++) {
                var pc = calcularPuntoDeControl(ry, i, i + 1);
                ctx.quadraticCurveTo(ry[i].x, ry[i].y, pc.x, pc.y);
            }
            ctx.quadraticCurveTo(ry[ultimoPunto - 1].x, ry[ultimoPunto - 1].y, ry[ultimoPunto].x, ry[ultimoPunto].y);
            ctx.stroke();
              }
        }

        function redibujarTrazados(){
            dibujar = false;
            ctx.clearRect(0, 0, cw, ch);
            reducirArray(factorDeAlisamiento,puntos);
            for(var i = 0; i < Trazados.length; i++){
              alisarTrazado(Trazados[i]);
            }
        }

        function oMousePos(canvas, evt){
            var ClientRect = canvas.getBoundingClientRect();
            return { //objeto
                x: Math.round(evt.clientX - ClientRect.left),
                y: Math.round(evt.clientY - ClientRect.top)
              }
        }       
    </script>

3rd code to try to save the canvas in an image, as I read there

<script>
        function convertToImg(canvas){
            var image = canvas.toDataURL(); 
            var canvas = new Image();
            var convertir = document.getElementById("convertir").src = image;       
        //return canvas;    
        }

        convertir.addEventListener('click', function(evt){
            dibujar = false;
            ctx.clearRect(0, 0, cw, ch);
            trazados.length = 0;
            puntos.length = 0;
        }, false);
</script>

finally a button that makes the call to the script to convert the canvas into an image

<button id="convertir">Convertir</button>   

up to here or at least I have achieved, but I can not pass the canvas to image and then save it in a MySQL DB or save it directly in MySQL. What kind of data should be used in the BD to keep this kind of stuff?

Greetings and thanks in advance