.append value of input text to <canvas> isnt displaying the output of .append('<p>' + value + '</p>')

Question

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...

The content of a canvas are pixels, so YES, there is a different way of adding text to a canvas: stackoverflow.com/questions/3697615/… — devnull69
– devnull69, Commented Jun 10, 2016 at 9:09
Your fiddle doesn't match your question. Do you have a <canvas> element or just a div with class="canvas"? — devnull69
– devnull69, Commented Jun 10, 2016 at 9: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
– Muhammad Ali, Commented Jun 10, 2016 at 9:16
You don't need a canvas for text. Period. A canvas is for "pixel art", so images you want to manipulate programmatically — devnull69
– devnull69, Commented Jun 10, 2016 at 9:19

meskobalazs · Accepted Answer · 2016-06-10 09:11:32Z

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.

edited Jun 10, 2016 at 9:11

answered Jun 10, 2016 at 9:08

meskobalazs

16.1k2 gold badges44 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

devnull69 Over a year ago

what did you get this from?

DBS Over a year ago

@devnull69 He probably looked at the fiddle, where it's clear there is no canvas element...?

meskobalazs Over a year ago

from his fiddle. I copied the relevant part here.

DBS Over a year ago

@devnull69 Yep, very confusing naming.

Muhammad Ali Over a year ago

whoops, sorry guys. let me update the fiddle with the relevant stuff

Collectives™ on Stack Overflow

.append value of input text to <canvas> isnt displaying the output of .append('<p>' + value + '</p>')

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related