Properties lost when copying HTML canvas or converting toDataURL - html

Question

I'm using a native HTML 5 canvas to create a text effect then attempting to create an image from the canvas or copy the canvas to a fabric.js object, but the output doesn't reflect the changes done to the text.
Fiddle: https://jsfiddle.net/rf8kdxq1/2/
Something simple I hope?
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();