-2

I have a jsfiddle here: https://jsfiddle.net/gemcodedigitalmarketing/zn5yLwh3/

What I want is the text in the customText input to be appended to the canvas. Though I am unsure as to why this is not working.

It works when I tried yesterday to append td and tr to a table. But maybe because its a canvas it needs a different way of adding text?

not sure... either way i would apprecaite help. 

$('#addText').click(function() {
    var value = $('#customText').val();
    $('canvas').append('<p>' + value + '</p>');
});

This is my jquery at the bottom of the page

<div class="assets">
<h3>Assets</h3>
<div class="text">
    <h4>Text</h4>
    <input id="customText" type="text">
    <button id="addText" class="btn btn-default">Add Text</button>
    <p></p>
</div>
<div class="image">
    <h4>Images</h4>
    <ul class="list-unstyled">
        <!-- List of images here -->
        <!-- <li><img src="images/sample.jpeg" class="img-rounded" /></li> -->
    </ul>
</div>
<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
    <div class="block">
        <!-- Add images and texts to here -->
    </div>
</div>

This is the relevant html.

Hope that gives you guys enough to go on...

tbraun89
  • 2,246
  • 3
  • 25
  • 44
Muhammad Ali
  • 119
  • 3
  • 13
  • 1
    The content of a canvas are pixels, so YES, there is a different way of adding text to a canvas: http://stackoverflow.com/questions/3697615/how-can-i-write-text-on-a-html5-canvas-element – devnull69 Jun 10 '16 at 09:09
  • 1
    Your fiddle doesn't match your question. Do you have a `` element or just a div with `class="canvas"`? – devnull69 Jun 10 '16 at 09:11
  • i just have a div class with the class canvas. Though it looks like I need to add a canvas from what everyones saying. – Muhammad Ali Jun 10 '16 at 09:16
  • 1
    You don't need a canvas for text. Period. A canvas is for "pixel art", so images you want to manipulate programmatically – devnull69 Jun 10 '16 at 09:19

1 Answers1

2

In your case canvas is not an element but a class.

This is from your fiddle:

<!-- canvas -->
<div class="canvas col-sm-8 col-md-8 col-lg-8">
    <div class="block">
        <!-- Add images and texts to here -->
    </div>
</div>

So you have to use it in the selector as:

$('.canvas')

Don't forget the dot.

meskobalazs
  • 15,741
  • 2
  • 40
  • 63