Q:

Fabricjs drawImage alternative

I were looking for a drawImage() alternative for fabric.js lib, so I've made a function:
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
  return new fabric. Image(img, {
    left: x,
    top: y,
    width: width,
    height: height,
    id: "rhino",
    clipTo: function (ctx) {
      ctx.rect(sx,sy,swidth,sheight); 
    }
  });
}
var imgElement = new Image();
imgElement.onload = function() {
  var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
  canvas.add(imgInstance);
}; 
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";

The result needs to be:

But I don't get nothing with my custom function.  Where is the problem? 
Codepen: http://codepen.io/anon/pen/RaxRqZ

A:

I do not really know what you want to achieve, but using clipTo is not my advice, both for performance and complexity reasons. 
Draw on a temp canvas the portion of image you need, then use this temp canvas a source for your fabricJS image. 

var canvas = new fabric. Canvas('c');

function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
      var tmpc = document.createElement('canvas');
      tmpc.width = swidth;
      tmpc.height = sheight;
      ctx = tmpc.getContext("2d");
      ctx.drawImage(img,-sx,-sy);
      return new fabric. Image(tmpc, {
        left: x,
        top: y,
        width: width,
        height: height,
        id: "rhino"
      });
    }
    var imgElement = new Image();
    imgElement.onload = function() {
      var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
      canvas.add(imgInstance);
    }; 
    imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500", height="500"></canvas>

