# Create pin with text

**URL:** <https://community.cesium.com/t/create-pin-with-text/3321>\
**Category:** CesiumJS\
**Created:** [November 14, 2015, 5:09pm UTC](https://community.cesium.com/t/create-pin-with-text/3321 "2015-11-14T17:09:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\
**Post date:** [November 14, 2015, 5:09pm UTC](https://community.cesium.com/t/create-pin-with-text/3321/1 "2015-11-14T17:09:06Z")

</div>

Hello!  
I created new pinBuilder, but text which I want to write in the the pins looks very small.  
I tried to change writeTextToCanvas.js, but it did not reach the correct proportions.  
Please tell me how can I increase the text inside the pin?

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [November 14, 2015, 9:36pm UTC](https://community.cesium.com/t/create-pin-with-text/3321/2 "2015-11-14T21:36:49Z")

</div>

Hello,

PinBuilder.fromText takes a text, color and size parameter. You can use the size parameter to make the pin bigger. Here is an example:

pinBuilder.fromText(‘this is my text’, Cesium.Color.BLACK, 48) //size = 48

``

However, if you are using a lot of text, a pin is probably not the best solution for you. It is really only ideal for a few characters.

You might want to consider using a label instead: [http://localhost:8080/Apps/Sandcastle/index.html?src=Labels.html&label=Showcases](http://localhost:8080/Apps/Sandcastle/index.html?src=Labels.html&label=Showcases)

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\
**Post date:** [November 14, 2015, 10:25pm UTC](https://community.cesium.com/t/create-pin-with-text/3321/3 "2015-11-14T22:25:59Z")

</div>

Yes, but the text will still hold about 10 percent of the pin. And I want to increase the canvas for text.

---

<div class="post-metadata">

**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\
**Post date:** [November 14, 2015, 10:34pm UTC](https://community.cesium.com/t/create-pin-with-text/3321/4 "2015-11-14T22:34:29Z")

</div>

I created a pin that looks like a flag. I need to write a small text is on the flag. The label is a good idea, but it does not suit me.

---

<div class="post-metadata">

**Author:** ![a.haruk](https://avatars.discourse-cdn.com/v4/letter/a/73ab20/32.png) [@a.haruk](https://community.cesium.com/u/a.haruk)\
**Post date:** [November 14, 2015, 11:33pm UTC](https://community.cesium.com/t/create-pin-with-text/3321/5 "2015-11-14T23:33:37Z")

</div>

This is a my version drawPin: (in cesium/Source/Core/PinBuilder.js)  
&nbsp;&nbsp;&nbsp;&nbsp;function drawMainFlag(context2D, color, color2, size) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.save();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.scale(size / 24, size / 24); //Added to auto-generated code to scale up to desired size.  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.fillStyle = color.toCssColorString(); //Modified from auto-generated code.  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.beginPath();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.moveTo(0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(24,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(24,24);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(0,24);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.closePath();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.clip();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.strokeStyle = 'rgba(0,0,0,0)';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineCap = 'butt';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineJoin = 'miter';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.miterLimit = 4;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.save();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.save();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.fillStyle = color.toCssColorString();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.strokeStyle = "#000000";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineWidth = 0.8460000157356262;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineCap = "butt";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineJoin = "miter";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.miterLimit = 2;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.translate(0.537864,1.39783);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.beginPath();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.moveTo(23.1652,2.88858);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(23.2506,13.2615);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(21.8628,12.5375,19.5891,14.9596,17.8087,14.5069);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(16.3006,14.1236,14.6513,11.8326,13.6113,11.7512);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(11.6024,11.5939,10.7326,11.8085,8.21161,13.0151);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(5.32287,14.3977,4.61371,11.1122,0.119319,11.8983);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(0,22.6886);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(0.126983,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(4.84511,1.94815,4.15795,-0.0633515,8.2095,1.61971);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(9.08774,1.98454,11.1566,0.469138,13.7687,0.249908);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(15.3818,0.114528,16.9351,2.66022,18.4953,3.00281);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.bezierCurveTo(20.6831,3.48321,22.688,1.48161,23.1652,2.88858);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.closePath();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.fill();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.stroke();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.restore();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.save();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.fillStyle = color2.toCssColorString(); //Modified from auto-generated code.  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// var g=context2D.createLinearGradient(0,0,5.8686131386875,4.204379562050001);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// g.addColorStop(0,"rgba(255, 255, 255, 1.00000000000)");  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// g.addColorStop(1,"rgba(0, 255, 0, 1.00000000000)");  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// context2D.fillStyle = g;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.strokeStyle = "#000000";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineWidth = 1.25;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineCap = "square";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineJoin = "miter";  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.miterLimit = 2;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.translate(17.562,17.3431);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.beginPath();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.moveTo(0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(5.8686131386875,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.quadraticCurveTo(5.8686131386875,0,5.8686131386875,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(5.8686131386875,4.204379562050001);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.quadraticCurveTo(5.8686131386875,4.204379562050001,5.8686131386875,4.204379562050001);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(0,4.204379562050001);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.quadraticCurveTo(0,4.204379562050001,0,4.204379562050001);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.lineTo(0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.quadraticCurveTo(0,0,0,0);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.closePath();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.fill();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.stroke();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.restore();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.restore();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;context2D.restore();

&nbsp;&nbsp;&nbsp;&nbsp;}