multiline text, or copies of the same line of text

[heaversm]

Hi - I want to achieve this effect:

where I have multiple copies of the same line of text (or copies of the canvas, etc). I can get blotter to work on a single line of text, but I've tried numerous methods of creating a copy and non of them work.

For example:

<div id="distortion-text1" class="progress__content"></div>
<div id="distortion-text2" class="progress__content"></div>
<div id="distortion-text3" class="progress__content"></div>

and

var elem1 = document.getElementById('distortion-text1')
var elem2 = document.getElementById('distortion-text2')
var elem3 = document.getElementById('distortion-text3')
var scope1 = blotter.forText(text);
var scope2 = blotter.forText(text);
var scope3 = blotter.forText(text);

scope1.appendTo(elem1);
scope2.appendTo(elem2);
scope3.appendTo(elem3);

I've also just tried cloning the canvas and that doesn't work. Blotter seems to just append one single canvas to the last dom node (distortion-text3), no matter what I do.

[heaversm]

I got this to work - but I feel like there should be a better method (or one you can control independently):

var textOptions = {
  family : "'gtf_adieu_trialbold','EB Garamond', serif",
  size : 50,
  fill : "#220032",
  paddingLeft : 40,
  paddingRight : 40
};

var text = new Blotter.Text("WORK IN PROGRESS", textOptions);
var text2 = new Blotter.Text("WORK IN PROGRESS",textOptions);
var text3 = new Blotter.Text("WORK IN PROGRESS",textOptions);

var blotter = new Blotter(material, {
  texts : [text,text2,text3]
});

var elem = document.getElementById('distortion-text')
var scope = blotter.forText(text);
var scope2 = blotter.forText(text2);
var scope3 = blotter.forText(text3);

scope.appendTo(elem);
scope2.appendTo(elem);
scope3.appendTo(elem);

Any idea on how to optimize?

Thanks!

[bradley]

The working example is the correct way to achieve this. The RenderScope objects Blotter instances return from forText just use basic JavaScript append and appendTo functions on the supplied DOM node, and that's just how they work.

If code repetition is annoying, you may also try building your texts, fetching their scopes, and appending them to their DOM elements in some kind of loop, but YMMV. I dont think that's really what youre after here though.

Best.