$('#cypher-branding-letter-spacing').change(function(e) {
  $('#cypher-branding-main-edit-right-txt-text').css('letter-spacing', $('#cypher-branding-letter-spacing').val() + 'px');
});

//add text to design
$(document).on('click', '#cypher-branding-btn-add-to-design-text', function() {

  //remove the canvas border before creating the image, then add it back
  $("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', 'none');

  html2canvas($("#cypher-branding-main-edit-right-txt-text-wrapper"), {
    onrendered: function(canvas) {
      var id = guid();

      var img = new Image();
      img = $('#cypher-branding-text-temp-img').find('img')[0];
      img.src = canvas.toDataURL('image/png');

      var w = canvas.width;
      var h = canvas.height;

      //var elem = $('<div id="cypher_container_' + id + '" class="cypher-container"><div id="cypher_container_inner_' + id + '" class="tooltip"><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /><span class="tooltiptext"><a href="#" onclick=rotatePlus("' + id + '");>Rotate +</a><a href="#" onclick=rotateMinus("' + id + '");>Rotate -</a><a href="#" onclick=removeFromDesign("' + id + '");>Remove</a><br /></span></div></div>');
      var elem = $('<div id="cypher_container_' + id + '" class="cypher-container" style="width:100px;"><div id="cypher_container_inner_' + id + '" class="tooltip"><span class="tooltiptext"><a href="#" onclick=removeFromDesign("' + id + '");>x</a><br /></span><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /></div></div>');
      $('.cypher-block').append(elem);

      elem.draggable({
        cancel: ".ui-rotatable-handle"
      });

      //rotate handles
      var nw = $("<div>", {
        class: "ui-rotatable-handle"
      });
      var ne = nw.clone();
      var se = nw.clone();

      elem.find('.cypher-blocks:first').resizable();
      elem.rotatable();

      elem.addClass("ui-rotatable-handle-sw");
      elem.addClass("ui-rotatable-handle-nw");
      elem.addClass("ui-rotatable-handle-ne");
      elem.addClass("ui-rotatable-handle-se");
      // Assign handles to box
      elem.find('.cypher-blocks:first').append(nw, ne, se);

      elem.find("div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
        elem.find('.cypher-blocks:first').rotatable("instance").startRotate(e);
      });
    }
  });

  //$("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', '1px dashed #777');

});

.cypher-blocks {
  display: inline-block;
  width: initial;
  cursor: move;
}

.cypher-block {
  padding: 10px;
  border: none;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background: transparent;
  height: 100%;
  width: 100%;
}

.cypher-block .ui-resizable-handle,
.cypher-block .ui-resizable-se {
  border: none;
  background-color: none;
  color: none;
  background-image: url("")
}

.cypher-block .ui-resizable-handle {}

.cypher-block .ui-rotatable-handle {
  background-image: url("")
}

.cypher-block:hover .ui-resizable-handle,
.cypher-block:hover .ui-resizable-se {
  border: 1px dotted #fff;
  background-color: #f00;
  color: #fff;
  resize: both;
}

.cypher-block:hover .ui-rotatable-handle {
  background: url('cypher-brand/rotate.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 16px;
  width: 16px;
  position: absolute;
}

<script src=".min.js"></script>
<script src=".ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src=".10.2/jquery.min.js"></script>


<div class="cypher-block" style="margin-top:20px;"></div>


<div id="cypher-branding-main-edit-right-txt-text-wrapper" style="width:300px;height:170px;padding:0;">
  <div id="cypher-branding-main-edit-right-txt-text">Sample Text</div>
</div>


<input type="number" id="cypher-branding-letter-spacing" class="cypher-branding-text-input" value="0" />

<span id="cypher-branding-btn-add-to-design-text" class="cypher-branding-input-btn cypher-branding-mand-padding">Add to Product Design</span>

$('#cypher-branding-letter-spacing').change(function(e) {
  $('#cypher-branding-main-edit-right-txt-text').css('letter-spacing', $('#cypher-branding-letter-spacing').val() + 'px');
});

//add text to design
$(document).on('click', '#cypher-branding-btn-add-to-design-text', function() {

  //remove the canvas border before creating the image, then add it back
  $("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', 'none');

  html2canvas($("#cypher-branding-main-edit-right-txt-text-wrapper"), {
    onrendered: function(canvas) {
      var id = guid();

      var img = new Image();
      img = $('#cypher-branding-text-temp-img').find('img')[0];
      img.src = canvas.toDataURL('image/png');

      var w = canvas.width;
      var h = canvas.height;

      //var elem = $('<div id="cypher_container_' + id + '" class="cypher-container"><div id="cypher_container_inner_' + id + '" class="tooltip"><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /><span class="tooltiptext"><a href="#" onclick=rotatePlus("' + id + '");>Rotate +</a><a href="#" onclick=rotateMinus("' + id + '");>Rotate -</a><a href="#" onclick=removeFromDesign("' + id + '");>Remove</a><br /></span></div></div>');
      var elem = $('<div id="cypher_container_' + id + '" class="cypher-container" style="width:100px;"><div id="cypher_container_inner_' + id + '" class="tooltip"><span class="tooltiptext"><a href="#" onclick=removeFromDesign("' + id + '");>x</a><br /></span><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /></div></div>');
      $('.cypher-block').append(elem);

      elem.draggable({
        cancel: ".ui-rotatable-handle"
      });

      //rotate handles
      var nw = $("<div>", {
        class: "ui-rotatable-handle"
      });
      var ne = nw.clone();
      var se = nw.clone();

      elem.find('.cypher-blocks:first').resizable();
      elem.rotatable();

      elem.addClass("ui-rotatable-handle-sw");
      elem.addClass("ui-rotatable-handle-nw");
      elem.addClass("ui-rotatable-handle-ne");
      elem.addClass("ui-rotatable-handle-se");
      // Assign handles to box
      elem.find('.cypher-blocks:first').append(nw, ne, se);

      elem.find("div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
        elem.find('.cypher-blocks:first').rotatable("instance").startRotate(e);
      });
    }
  });

  //$("#cypher-branding-main-edit-right-txt-text-wrapper").css('border', '1px dashed #777');

});

.cypher-blocks {
  display: inline-block;
  width: initial;
  cursor: move;
}

.cypher-block {
  padding: 10px;
  border: none;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  background: transparent;
  height: 100%;
  width: 100%;
}

.cypher-block .ui-resizable-handle,
.cypher-block .ui-resizable-se {
  border: none;
  background-color: none;
  color: none;
  background-image: url("")
}

.cypher-block .ui-resizable-handle {}

.cypher-block .ui-rotatable-handle {
  background-image: url("")
}

.cypher-block:hover .ui-resizable-handle,
.cypher-block:hover .ui-resizable-se {
  border: 1px dotted #fff;
  background-color: #f00;
  color: #fff;
  resize: both;
}

.cypher-block:hover .ui-rotatable-handle {
  background: url('cypher-brand/rotate.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 16px;
  width: 16px;
  position: absolute;
}

<script src="https://html2canvas.hertzen./dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr/jquery.ui.rotatable/1.0.1/jquery.ui.rotatable.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<div class="cypher-block" style="margin-top:20px;"></div>


<div id="cypher-branding-main-edit-right-txt-text-wrapper" style="width:300px;height:170px;padding:0;">
  <div id="cypher-branding-main-edit-right-txt-text">Sample Text</div>
</div>


<input type="number" id="cypher-branding-letter-spacing" class="cypher-branding-text-input" value="0" />

<span id="cypher-branding-btn-add-to-design-text" class="cypher-branding-input-btn cypher-branding-mand-padding">Add to Product Design</span>

I'm trying to create an image from text, then add it to another div.

The issue is with 'letter-spacing' CSS style.

After applying the CSS, then creating an image using html2canvas, the CSS on the image does not show.

Just to note, all other CSS styles I apply to the div shows, like line-spacing, color, font etc. It's only letter-spacing that is the issue.

I've added a snippet, however it's giving me a 'Script error' this is only when adding the external scripts. Not sure yet on how to resolve it as I'm new to snippets.

• javascript
• jquery
• html
• css
• html2canvas

• Did you customize the css for .line-spacing or is that included in something else? If you did create your own css, please include it. Also, it might be good to use the snippet option here. – adprocas Commented Mar 9, 2018 at 19:08
• @adpro I'm not sure where you are seeing .line-spacing? My question is regarding letter-spacing. All CSS applied via JavaScript is done so on the .css('','') method. – Orion Commented Mar 9, 2018 at 19:12
• Sorry, I copied the wrong text from your question. I meant to put letter-spacing. Are all of the styles applied in JS as well? I see you're adding CSS classes to elements, but you didn't include the styles. Have you changed the styles? When you say the CSS does not show, do you mean it isn't being applied to the selector, or are the styles not showing? Where are you setting the styles? In a CSS file? I think more information is needed to troubleshoot further. My copy mistake doesn't take away from the rest of my ment. – adprocas Commented Mar 9, 2018 at 19:24
• I also don't see #cypher-branding-letter-spacing in your markup. Is the JS getting into that change event handler function? Have you stepped through to make sure it's getting in there and applying your css classes? If so, the styles would need to be included. That's where I would start. And get a working snippet for us. – adprocas Commented Mar 9, 2018 at 19:27
• 1 Check my answer – adprocas Commented Mar 9, 2018 at 19:44

1 Answer 1

You need to set letterRendering:true

  html2canvas($("#cypher-branding-main-edit-right-txt-text-wrapper"), {
    onrendered: function(canvas) {
      var id = guid();

      var img = new Image();
      img = $('#cypher-branding-text-temp-img').find('img')[0];
      img.src = canvas.toDataURL('image/png');

      var w = canvas.width;
      var h = canvas.height;

      //var elem = $('<div id="cypher_container_' + id + '" class="cypher-container"><div id="cypher_container_inner_' + id + '" class="tooltip"><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /><span class="tooltiptext"><a href="#" onclick=rotatePlus("' + id + '");>Rotate +</a><a href="#" onclick=rotateMinus("' + id + '");>Rotate -</a><a href="#" onclick=removeFromDesign("' + id + '");>Remove</a><br /></span></div></div>');
      var elem = $('<div id="cypher_container_' + id + '" class="cypher-container" style="width:100px;"><div id="cypher_container_inner_' + id + '" class="tooltip"><span class="tooltiptext"><a href="#" onclick=removeFromDesign("' + id + '");>x</a><br /></span><img id="cypher_container_img' + id + '" onclick=showLogoCommands("' + id + '"); src="' + img.src + '" class="cypher-blocks" style="width:' + w + 'px; height:' + h + 'px" /></div></div>');
      $('.cypher-block').append(elem);

      elem.draggable({
        cancel: ".ui-rotatable-handle"
      });

      //rotate handles
      var nw = $("<div>", {
        class: "ui-rotatable-handle"
      });
      var ne = nw.clone();
      var se = nw.clone();

      elem.find('.cypher-blocks:first').resizable();
      elem.rotatable();

      elem.addClass("ui-rotatable-handle-sw");
      elem.addClass("ui-rotatable-handle-nw");
      elem.addClass("ui-rotatable-handle-ne");
      elem.addClass("ui-rotatable-handle-se");
      // Assign handles to box
      elem.find('.cypher-blocks:first').append(nw, ne, se);

      elem.find("div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
        elem.find('.cypher-blocks:first').rotatable("instance").startRotate(e);
      });
    },
    letterRendering:true
  });

That should work I think.

Based on this Letter-spacing isn't supported