Custom Canvas

Custom Canvas.markdown

Custom Canvas

Custom Canvas for use on a billboard

A Pen by Michael Lodge-Paolini on CodePen.

License.

index.html

<div id="cesiumContainer" class="fullScreen"><div>

script.js

var svgImage = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 276.063 276.063" style="enable-background:new 0 0 276.063 276.063;" xml:space="preserve"><path style="fill:#231F20;" d="M255.54,143.092c0-32.806-21.808-61.024-52.526-68.974c-6.149-18.849-20.032-33.556-37.473-40.808  c0.348-1.756,0.534-3.568,0.534-5.425C166.075,12.509,153.565,0,138.189,0c-15.376,0-27.885,12.509-27.885,27.886  c0,2.604,0.367,5.123,1.038,7.516c-4.97,2.528-9.646,5.693-13.89,9.475C87.313,53.91,80.183,65.856,76.94,79.021  c-31.618,3.126-56.418,30.363-56.418,63.4c0,13.772,3.174,26.772,8.736,35.989l15.477,67.704  c0.227,3.865,2.743,12.556,30.669,21.114c10.766,3.299,33.239,8.833,62.784,8.833c29.545,0,52.019-5.535,62.785-8.833  c27.923-8.556,30.441-17.245,30.668-21.11l15.773-68.997c0.005-0.021,0.006-0.042,0.011-0.064c0.034-0.156,0.059-0.316,0.084-0.476  c0.018-0.115,0.039-0.231,0.053-0.346c0.004-0.035,0.005-0.071,0.008-0.107C252.782,165.999,255.54,154.6,255.54,143.092z   M60.465,243.126l-15.643-68.429c0.701-3.891,7.597-9.795,20.478-15.098l13.448,91.886  C69.104,248.453,62.631,245.267,60.465,243.126z M130.188,259.91c-12.837-0.477-24.573-2.059-34.641-4.127L80.717,154.451  c13.022-3.508,29.537-6.124,49.471-6.686V259.91z M180.922,255.765c-10.088,2.077-21.858,3.667-34.734,4.145V147.765  c19.935,0.562,36.456,3.177,49.478,6.685L180.922,255.765z M215.914,243.125c-2.16,2.135-8.602,5.308-18.196,8.332l13.369-91.862  c12.938,5.325,19.807,11.254,20.46,15.144L215.914,243.125z M214.32,143.609c-2.231-0.85-4.558-1.649-6.947-2.414  c-0.094-0.035-0.192-0.063-0.288-0.095c-19.264-6.121-43.375-9.459-68.896-9.459c-25.525,0-49.64,3.339-68.905,9.463  c-0.094,0.031-0.189,0.058-0.281,0.092c-2.388,0.764-4.714,1.564-6.944,2.413c-10.279,3.914-18.341,8.538-23.959,13.643  c-1.019-4.599-1.576-9.651-1.576-14.83c0-26.305,20.857-47.706,46.52-47.704l0.399,0.011c0.023,0,0.045-0.003,0.068-0.003  c0.023,0,0.046,0.005,0.069,0.005c3.916,0,7.337-2.878,7.909-6.867c2.494-17.406,13.65-31.798,28.539-38.845  c4.883,4.202,11.228,6.751,18.161,6.751c7.726,0,14.727-3.16,19.782-8.253c11.547,4.384,21.191,13.056,26.893,24.399  c-12.942,0.162-25.521,3.945-36.427,10.984c-3.712,2.396-4.779,7.348-2.383,11.06c1.53,2.371,4.103,3.663,6.729,3.663  c1.486,0,2.99-0.414,4.331-1.279c8.558-5.524,18.452-8.443,28.614-8.443c3.182,0,6.372,0.287,9.482,0.854l0.001,0.001  c25.687,4.68,44.33,27.532,44.33,54.336c0,4.655-0.58,9.283-1.7,13.761C232.244,151.906,224.332,147.421,214.32,143.609z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>';

var viewer = new Cesium.Viewer('cesiumContainer');
var entity = new Cesium.Entity();

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');

var image = new Image();
image.src = 'data:image/svg+xml;base64,' + window.btoa(svgImage);

//Need to wait for image to load before proceeding to draw
image.onload = function() {
  canvas.getContext('2d').drawImage(image, 0, 0);

  entity.rectangle = new Cesium.RectangleGraphics({
    coordinates: Cesium.Rectangle.fromDegrees(-86.69777, 30.03883, -76.69777, 40.03883),
    material: new Cesium.ImageMaterialProperty({ image: canvas })
    //material: new Cesium.StripeMaterialProperty({ repeat: 4})
  });

  viewer.entities.add(entity);
  viewer.flyTo(viewer.entities);
};

scripts

<script src="http://cesiumjs.org/Cesium/Build/CesiumUnminified/Cesium.js"></script>

style.css

.fullScreen {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%;
}

styles

<link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet" />