CODEWITHSUNDEEP
canvasbitmapcreatejseaseljs
vNottbeck
vNottbeck

Reputation: 9

How do I convert text to bitmap in createjs?

For instance I have this code:

var text = new createjs.Text("Hello World", "Bold 10px Arial", "#000000");

And I want it to get turned into bitmap.

Upvotes: 0

Views: 889

Answers (2)

Lanny
Lanny

Reputation: 11294

You can use the cache() method, which creates an off-screen canvas of the content. 

var b = text.getBounds();
text.cache(b.x, b.y, b.width, b.height, 2);

Here is an example showing cache, as well as exporting the cache to a dataURL, and then making an image with it. http://jsfiddle.net/0wgwaLr6/

var url = text.cacheCanvas.toDataURL();
var img = document.createElement("img");
img.src = url;

Upvotes: 1

Catalin Iancu
Catalin Iancu

Reputation: 722

Perhaps you are misunderstanding how the objects are rendered with createJS?

Everything (images, texts, animations) is drawn on a canvas, which means they don't exist as their individual elements (like text), but rather as a 'drawing'. That also means you can convert it at any time in an image.

You can either do that by right-clicking on the canvas and saving the image if you need it only once, or programmatically with:

image.src = canvas.toDataURL('image/jpeg');

or 

image.src = canvas.toDataURL('image/png'); //larger, higher quality

Upvotes: 0

Related Questions