How to save canvas image

Question

I'm working with fabric.js and creating a customized product but I can not save the image and div's in and what exists on canvas ... My question is how to keep together image that exists in canvas as image . ?

<!--  EDITOR      -->
<!--manipular div tranasparente-->
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
    <!---->
    <img id="tshirtFacing" src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"></img>
    <!--**********************************************************-->
    <div id="drawingArea" style="position: absolute;top: 100px;left: 160px;z-index: 10;width: 200px;height: 400px;">
        <!--area de canvas-->
        <canvas id="lienzo" width=200 height="400" class="hover" style="-webkit-user-select: none;"></canvas>
    </div>

</div>

---

Image

Answer 1

The HTMLCanvasElement.toDataURL() method returns a data URIs containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

var canvas = document.getElementById("lienzo");
var data = canvas.toDataURL("image/jpeg");

Hope this will helps you.