# Cesium not show anything under transparent background **URL:** \ **Category:** CesiumJS\ **Created:** [March 24, 2023, 5:41pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062 "2023-03-24T17:41:33Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Dmitry\_Roshchupkin](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dmitry_roshchupkin/32/12895_2.png) [@Dmitry\_Roshchupkin](https://community.cesium.com/u/Dmitry_Roshchupkin)\ **Post date:** [March 24, 2023, 5:41pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/1 "2023-03-24T17:41:33Z")
Hi! Can anybody please help? I try to create a primitive, like ellipse and fill it use canvas with transparent background. But in this case all under transparent background become transparent too. How I can blend primitive filled with canvas with transparent background and other semi-transparent entities/primitive which are located under first primitive (filled with canvas). Example: > **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=rVdtc+I2EP4rGr5gLpyx4SAUkkwJ8VyYIVcG0l47pZMRtgzqyZZHkkloh//eld+wgaT5kHzA0upZ7erR7mrj8lAqtKXkmQh0jULyjMZE0jgwf0tkxrLmJvMxDxWmIRHLWmO4DJehm2gyrEDNMntWr939qd+1v1z2O/3e5bAAhGsAfLbNrt2xL9vtfrfbs+xuv1cgXBKqxHhmeIyFghEOO6YveDDHHoylARs1tbnUOiMKRZztGLgEqukBTNiJKkqkiT3P+HcZIvgrUAOUSbRMAg6sD9DbVkdC4J3xZ66HkuN8hvNalmUn7hxmVdBFKm6noGKWg/5qFMNn6qnNAPUKQYCBD4rZoHwdY864SFwbsWiDjYO1CmDu3JUcscxLK5/lBvfw3ackvsGaIK7C4ZqREmsu58KjIXgHvGVW5zmuclcfz9eBrg2h640aINv6EMK+308enQplnW5hNGOsIGwZ+lwgQwcfhaizh/C5ukYdy4LRxUUj5WqLBXJxuMUSMB534wAYNl1BwE2HET0z6imgrvdFGdpMIkHv27fK4vTEIP+SipP9IR3JixZmoDVR41Rm1Ntetm+ySSo1ffgCvL7izEN2L3pBDzzkMsIuqSeHQ6jVgt2YG8MNEKQ2JA1NxH2YUIkSg7GkcFtuLAQcA+lNW1LtGJG5Z5lb9SleEYbqF3SYeQGprte+Z4fM/QoIlrEgj9pzLWikNGQu5Sj9c4slyfK9HlDPY+A4+FzH+n5XRFG3PjzWGTG6DrUCI76qLvuUsYV2PWGFYffH6XrhVRPIb6K2VeEVTpSHXrV2PmTSPJt8vBLULaWS2kWQWcvaJMBrsqwV8ReHFCIskCUoQlSDBtlFl0JVkAhCCqAvkA1NtIPffbG8L6U7/DYyPg+ec9+XRP0OjoO3G1Pg0OOB0UCfsvwcHkP/eD90/L6SnnqYZn/mTp7+mUmNOFCe1SsJLwYxI0EDKFvbrG6le5XuYJavGwWVEN+CMIg38pXwgCixm4DPOHR1QfMxk6Sgb30KKO19rG6UbguM5MoVnaJS5spHSpWaWwybR5hD9bOqS/tG8/99mMFbuObhqx5E6fo9JQILdwPKx5J3+4MQZI2IPeLdHyCve3zWXYcxGsmzhKGsbRhUIq5ZBkgS0Af8NxejFwrX17FOV2mYr/Yri2sIcaiCgqrdoJTTG3M+upuMvi2eZs786c75Oncc1DrSLTGSPmM25AmtQODwb5JTYqY0zL84grQXOuwG52rOqFg+ul6f6WIBZstBdXg681H1GnPpIo4iLtTgdWuFKIOat6PFZFzdTQFSslhfHTpxRb8+jEvinV2C58YjYqHASOHELQMhPEeJ1JzNnaeHX6ePk9l04tw9jaaz+9HT7dT5dndC5r5RLSytT/rlIo5uhHZvt5MhDpLKvaA6PdEUizVB4/S1h4cyefVkUdE/so061MiSvFwsm6/g827KsrqvqR4g9pstl3Wu6UofpqPn5lMLuqZSk+kCbwKbPts98pRLj0ilaYA+fJBlc9Fo1Zq1Za24nnTrq6TPuMnt/0wDHWYoFswwzZYiQaT7Ftlaxe4PAv2WlOkFg2arrHrl0S2i3vWZ/2wgALGUsOLH0BvQf+BpvrlqAf5ElXGsI++XLREM7zRsY99MU6FpmlctmJ7XVJyzFRZHO/8H)** > > The Cesium Sandcastle provides an interactive environment for testing Cesium code. Screenshot: ![image](https://global.discourse-cdn.com/cesium/original/2X/d/d3a48f9bf58a377bdaac64106c03644d68890093.jpeg) Thanks! ---
**Author:** ![Marco13](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/marco13/32/2757_2.png) [@Marco13](https://community.cesium.com/u/Marco13)\ **Post date:** [March 24, 2023, 8:50pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/2 "2023-03-24T20:50:40Z")
It’s not entirely clear whether this is the effect that you want to achieve, but you might be looking for ```auto const material = new Cesium.Material({ translucent: true, // <--------------------------------- this line?! fabric: { ... ``` ![Cesium Translucent Material](https://global.discourse-cdn.com/cesium/original/2X/7/75c658d92f6ede9d6182ced236039c971ec978ad.png) ---
**Author:** ![Dmitry\_Roshchupkin](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dmitry_roshchupkin/32/12895_2.png) [@Dmitry\_Roshchupkin](https://community.cesium.com/u/Dmitry_Roshchupkin)\ **Post date:** [March 25, 2023, 12:01pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/3 "2023-03-25T12:01:32Z")
Hi! Thank you very much for your answer! Yes, I want to have an effect like in your example. But in your example, the black text becomes not black, looks like it blends with the semi-transparent white rectangle (but the rectangle located under the text and text, which locate upper, have to be fully black). The same effect I have if I draw text in this way: ```auto let material = new Cesium.ImageMaterialProperty({ image: canvas, transparent: true }); var eEntity = viewer.entities.add({ name: "Single Large Canvas of Labels", rectangle: { coordinates: Cesium.Rectangle.fromRadians( lng + offsetX, lat + offsetY, lng + offsetX + 0.00001, lat + offsetY + 0.000002, ), height: 100 + 0.01 * i, material: material }, }); ``` Is it possible to live text black color if text upper the semi-transparent white rectangle? Only transparent and semi-transparent colors in materials canvas have to be blended with primitives/entities under it. Is it possible ? You can see difference in text black color in next photos: ![Screenshot_131](https://global.discourse-cdn.com/cesium/original/2X/9/9785b66da565854195bebfb114d8f7a4bc9293f1.jpeg) ![Screenshot_132](https://global.discourse-cdn.com/cesium/original/2X/0/04745cbb89c46dad34fba3966417adfacea14d2e.jpeg) ---
**Author:** ![Dmitry\_Roshchupkin](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dmitry_roshchupkin/32/12895_2.png) [@Dmitry\_Roshchupkin](https://community.cesium.com/u/Dmitry_Roshchupkin)\ **Post date:** [March 25, 2023, 12:34pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/4 "2023-03-25T12:34:12Z")
Not transparent background becomes a semitransparent too. I need that only transparent and semitransparent canvas color will have a transparency. Not transparent color will not have transparency. Is it possible? Example (that non transparent colors become a transparent): > **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=rVdbb+I4FP4rFi+ElgmBDpSlFy2l0RSJziLo7uxqWVUmcYJ3nDiyHVpmxX/f49xIuHT60KpKnOPv+Fx8bjg8lAqtKXkhAt2gkLygEZE0Dsw/EpqxqDnJ94iHCtOQiEWtcbUIF6GTcDKsgM0ye1av0/2l321/vuxf9HuXVwUg9AHwqW122xfty06n3+32rHa33ysQDglVIjwTPMJCwQqHF6YneDDDLqylAQc1tbhUOiMKRZxtGKgErKkBJpxEFSXSxK5r/LcIEfwVqAHKKJomAQfSB+htqUMh8Mb4O+dDiTmfwF7LstqJOruvKug8JXdSUPGVg/5pFMsX6qrVAPUKQoDBHxSzQfk6Rpxxkag2ZNEKGztpFcDMvi8pYpmXVv6VC9zCe5s68Q2vCeIoHPqMlLzmcC5cGoJ24LdM6izHVe7q4/21c9eKUH+lBqhtfYjDvj2Mn+yKyy66hdDMY4XDFqHHBTJ08FGIuvYVvK5v0IVlwer8vJH6ao0FcnC4xhIwLnfiADxsOoKAmjYj+suop4C6PhdlaDOJBH1u3yqTU4uB/jklJ+dDOpJXTcxAPlGjlGbUO252bnJISjWXxKfhFKuVkcnM6B5lbK42TKdRXfhLo2NZTZQ/GvUDsL5yA3bhv6x3s6ruoQIevLWMJWcuaveiV/TIQy4j7JB6AW614BjmxBAEBKkVSbMDcQ8+qESJzbGkEDBOLAR4EuljW1IbIHPnZJ6pT/CSMFQ/p7kNUG303rfMz7lmAcEyFuRJO08TGqlFBxboxx2WJCs69YC6LgPlQes61kG2JIo6VY/px5BRP9QMjHiqftr7S4ad74f7hV5NiAB9KxXfgk3c8yRRf8IRj3C/psChywOjgc6yVLvah/71fujofdU5zZQ0kTN18kzORGrETvGdmDx5q93nMaPm9UiBppLFuldAIVciJlnOengpqFOqUmoTQdFa1MYB9smiVqR2HFJI3kCWoAhRDRpkkVuqAoJEkK0AfYVC00QbeG6L7W2pksJzZ1RWTyVoScxI0ADK6jqrqylLycJpvm8U+kDwC8IgGMkXwgOixGYMHsKhowuuh5kkhQ7+IaB09j67UTIZhOTMFZ6ikufMe0yVnlAsm3uYXXW2qlvbRvPnOkyhV/s8PKlBlO4/UCKwcFbAvE95tz4IQUKJ2CXuww5yWuOj6tqM0UgedRjKxppBJY2aZYAkAX3E/3IxfKVwfRfW4S4N891+ZdOHbIASKajaDEoZszJnw/vx8Ov8eWrPnu/tLzPbRq093pJH0jbbhuSnFQgY/6ZzSp4pLfM3jiB3hA67wbGMHhbbe9frMZ1xpdSutvZ8Vb3GnDqPo4gLNTgtrSBlUPNuOB+PqqedrDLZvsO4JO7RLehFLhFzBUIKJe4YEKFXJVRzOrOfH3+fPI2nk7F9/zycTB+Gz3cT++v9gTO3jXK1TPrimR46jtfKpNLl1k0Fj4hQu2A8WuISQyOsG2hqTFHJ8h5KbD0Vbt6erUMcJLV2TnUtQBMsfIJG6egDLTvpv7KowR85U+66TIlebjfNE/h8tKwOoGXOAvGT8fPY/Jmv9hrEWQtGyNLE7YDfBDY9tnniqS9dIpV2A/woGWSlo5g6a83aolbpnAhdJxPPba7BrzTQMY1iwQzTbCkSRHqCkq1l7HwnMHxKmUYTcLbKrNcuXSPq3hz5mQfRjqWEHS+GGYX+gGZ6e90C/AEr41iH+W9rIhjeaNiqfTtJiaZpXrfg8zin4pwtsdg7+X8)** > > The Cesium Sandcastle provides an interactive environment for testing Cesium code. Screenshot: ![image](https://global.discourse-cdn.com/cesium/original/2X/c/cfb7f69ba6cf1ddbff816ef8ad58dac5a8041c14.jpeg) ---
**Author:** ![Dmitry\_Roshchupkin](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dmitry_roshchupkin/32/12895_2.png) [@Dmitry\_Roshchupkin](https://community.cesium.com/u/Dmitry_Roshchupkin)\ **Post date:** [September 6, 2023, 6:29pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/5 "2023-09-06T18:29:04Z")
I have found a solution using billboard with BillboardCollection, like this: ```auto const billboard = this.billboardCollection.add({ id: id, position: position, image: canvas, width: bilboardSize.x, height: bilboardSize.y, sizeInMeters: this.isSizeInMeters, // size in meters eyeOffset: new Cesium.Cartesian3(0.0, 0.0, -100), verticalOrigin : Cesium.VerticalOrigin.CENTER, heightReference: this.isSizeInMeters ? Cesium.HeightReference.NONE : Cesium.HeightReference.RELATIVE_TO_GROUND }); ``` ---
**Author:** ![Dmitry\_Roshchupkin](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dmitry_roshchupkin/32/12895_2.png) [@Dmitry\_Roshchupkin](https://community.cesium.com/u/Dmitry_Roshchupkin)\ **Post date:** [September 7, 2023, 10:32am UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/6 "2023-09-07T10:32:02Z")
![image](https://global.discourse-cdn.com/cesium/original/2X/9/94a9a296734d65e187759baf2db24b1d6444c85a.jpeg) this it using billboards, as I have written in previous message Is it possible to have the same effect using entities/primitives with material e.g. rectangle ? Thanks! ---
**Author:** ![Dmitry\_Roshchupkin](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dmitry_roshchupkin/32/12895_2.png) [@Dmitry\_Roshchupkin](https://community.cesium.com/u/Dmitry_Roshchupkin)\ **Post date:** [September 8, 2023, 8:02pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/7 "2023-09-08T20:02:05Z")
I have tried to combine materials, to have effect like with billbords ```auto const material = new Cesium.Material({ translucent: true, fabric: { materials: { alphaMaterial: { type: "AlphaMap", uniforms: { image: icon, channel: "a", }, }, diffuseMaterial: { type: "Image", uniforms: { image: icon, }, }, }, components: { diffuse: "diffuseMaterial.diffuse", alpha: "alphaMaterial.alpha", }, }, }); ``` but result the same as in my first example from March 24 Maybe it possible somehove to combine material to have effect the same as with billboards? Thanks! ---
**Author:** ![shrewmus](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shrewmus/32/10239_2.png) [@shrewmus](https://community.cesium.com/u/shrewmus)\ **Post date:** [September 9, 2023, 3:19pm UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/8 "2023-09-09T15:19:42Z")
Maybe try to experiment with datasources. Not sure, I’m not looking inside - how Cesium works, As for me it seems related to the render ordering. I’ve found the way with datasources - if you place your items in datasources and take care of the order in which they added to the viewer You can experiment here - if you just place polygons to viewer entities seems that you can’t control the order of rendering even if you change their height (like polygon2.polygon.height = 10) But when you change the order of adding datasources into the viewer you can achieve desired ordering > **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=zVTRbtowFP0VixegojYJY5VoilbRPUzqtGqd9rJMlUkuxKpjI9uhSqv++24SAgHSdZ00aXkA2+fcY/ve48sYCTuUMpHyJVg2Ayuy9O5aL/WdXoORPKcrtQw7g1CFas0NWQt4AEMuiIIHUtHp93Kt143K6Uwrx4UC0+2fF1F15ErLfKmVj7GVCAXlhBNgKY/j3lOoCH6KpzAh3ZuKTPzuoFrfRE/Ihld8iQDDTZTkk/okM24cjrga0YXR6RUsDYC9NIbnvR+7wOI79bx3dDwgo7Pil7wA+q3g8H0JjtpBrwS934FjOm5AP/uDesJOdsspd2AEl5Nmrj8Vhfq8QW6MXoFxee9pf5+ympjFVwvbPTqiM1zZFTdYmwlOMmgSnvu78Qmrx/X/7rx1NbTUpizEpVwlvLe3/PXj1YAM6Xgj+Ryq59ovDbe8ySzevzTLmA5LswwHL0B+CzQ8K6FRG+SXkPcyhLKtHvmfnbErY1HEKLMOE8sdv9WZicDb7xuzAxg7yGFA2UPapPy3SvnbdnS0yb63NuYp2EcarUy/EmaMRAlXSyDaxNgi9YLEGGnLSEsSMIBXqcwcbyUrpaONymv/GdfbPpuK/6h1+k33Dp5N/7wz6ATW5RKmddk+iHSljSOZkT00hIN0JdE/ls2z6B4cjawttAtqwJqhQSzWRMQXYeeg5YcdEkluLSKLTMpb8QhhZxow5B+FSs1joZZfKs8VtMSbXleLlNKA4bQ90mkt5xw3294kcHwuYbu3UAt9wxXIBqUgzXWcT5uuDpyZ7rs8cPF0JkV0T7ChuAQ2BiOxsJicnDhNrMPGgedD5p4WOxBrF39glpySFJ8aetrpzBGFNUgY+sQlfyvKWXwg+gDWMeDWvSaJ07204LzIZZ30RgF+AQ)** > > The Cesium Sandcastle provides an interactive environment for testing Cesium code. ---
**Author:** ![Dmitry\_Roshchupkin](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/dmitry_roshchupkin/32/12895_2.png) [@Dmitry\_Roshchupkin](https://community.cesium.com/u/Dmitry_Roshchupkin)\ **Post date:** [September 13, 2023, 9:48am UTC](https://community.cesium.com/t/cesium-not-show-anything-under-transparent-background/23062/9 "2023-09-13T09:48:23Z")
Yes, it work without height, but when you add height is become working like in second example > **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=zVVdb9owFP0rFi9ARWMSxirRFK2ie5jUadU67WWZKpNcEquOjWyHKq3633eTEEggXdc9TPMD2D7nHn/c4xtKSdBzHMpTFoOhCzA8S++uVazu1Aa0YLmzlnHQGwUykBumyYbDA2hyQSQ8kIrufC/nBv2wHC6UtIxL0P3heRFVR66VyGMlPYytRByQllsOxmFRNHgKJMEmWQoz0r+pyMTrj6r5bfSMbHlFS4DHiZ0RdzweNWY5aKbDJJ/V+1swbbHH5MRZaZVeQawBzKXWLB/82AcW7dR13znTEZmcFb/kBdDrBMfvS3DSDbol6P4OnDrTBvRzuDsUPdlPp8yC5kzMmhn4VKTv8xa50WoN2uaDp/Y6ZY7xbl9Nd/9oi1YzadZMY8ZmOMigSXge7vsntO7X//v91tlQQukyEZdinbBBa/rrx6sRGTvTreRzIJ9rFzU89CYLuf/eQlNnXFqoqdmCvA5ofFZCky7IKyH3ZQhlO53zP/tln9witWFmLF4ss+xWZToEt11jFgcwVpvDgLLedEl5b5XydqXraJG247aWKthHGp1MrxKmlIQJkzEQpSMsp2pFIow0ZaRBV2rAo1QWj3aSldLRQuWx/4zr7h5TxX9UKv2mBgePaXjeG/V8Y3MB8zptH3i6VtqSTIsBGsJCuhboH0OXWXgP1gmNKbQLqk+boX7EN4RHF0Hv4PMQ9EgomDGIrDIhbvkjBL25T5F/FCoUi7iMv1SeK2iJO7+uJh3H8SkOuyOtUmLJcLHdSXzLlgJ2a3O5UjdMgmhQCtJSRfm86Wrf6nnb5b6N5gvBw3uCZcYmsDUYibjBy8mJVcRYLBy4P2S2tOiBWLf4AzXklKT41NDTVmWWSMxBQtEnNvlbUUajA9EHMJYCM/Y1SRy2rgXHxV3Wl95IwC8)** > > The Cesium Sandcastle provides an interactive environment for testing Cesium code.