复制HTML画布或转换为DataURL时属性丢失

Question

我使用原生HTML 5画布创建文本效果，然后尝试从画布创建图像或将画布复制到fabric.js对象，但输出并不反映更改完成了文本。

小提琴：https://jsfiddle.net/rf8kdxq1/2/

我希望有些简单吗？

var ctx = demo.getContext('2d'),
font = '64px impact',
w = demo.width,
h = demo.height,
curve,
offsetY,
bottom,
textHeight,
isTri = false,
dltY,
angleSteps = 180 / w,
i = w,
y,
os = document.createElement('canvas'),
octx = os.getContext('2d');

os.width = w;
os.height = h;
octx.font = font;
octx.textBaseline = 'top';
octx.textAlign = 'center';

curve = parseInt(110, 10);
offsetY = parseInt(4, 10);
textHeight = parseInt(64, 10);
bottom = parseInt(200, 10);  

octx.fillText('BRIDGE', w * 0.5, 0);

/// slide and dice
i = w;
dltY = curve / textHeight;
y = 0;
while (i--) {     
y = bottom - curve * Math.sin(i * angleSteps * Math.PI / 180);

ctx.drawImage(os, i, 0, 1, textHeight,
            i, h * 0.5 - offsetY / textHeight * y, 1, y);
}
//  ctx.drawImage(os, i, 0);    
dataURL = os.toDataURL();
img = new Image();
img.src = dataURL;
img.onload = function() {
console.log(img);  
};
var newCanv = new fabric.Canvas('canvasd');

function xfer() {
  var image = new fabric.Image(os);
  setTimeout(function() {
       newCanv.add(image);
  },500);   

}     


xfer();