Databases
StackOverflow2013
Postsdbo
POFabric.js not writing text on html5 canvas
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFabric.js not writing text on html5 canvas
    text
    copied!<p>Okay so here is what is going on. I've got this page here that is using fabric.js. Got everything laid out the problem is the changetext() function. It's not writing to the canvas. I know all the variables are being passed to the function. I know the code inside the function works. It's just not working while in the function.</p> <pre><code> &lt;? include 'config/config.php'; ?&gt; &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt; About &lt;/title&gt; &lt;meta charset="UTF-8" /&gt; &lt;link rel="stylesheet" href="css/main.css" type="text/css" /&gt; &lt;script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'&gt;&lt;/script&gt; &lt;script src="js/fabric.js"&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function(){ $("#card-worker-box &gt; div").hide(); var canvas = new fabric.Canvas('cardmaker'); var font = [ 'Delicious', //0 'Quake_Cyr', //1 'OdessaScript_500', //2 'CA_BND_Web_Bold_700', //3 'CrashCTT_400', //4 'DejaVu_Serif_400', //5 'Encient_German_Gothic_400',//6 'Globus_500', //7 'Modernist_One_400', //8 'Tallys_400', //9 'Terminator_Cyr', //10 'Times_New_Roman', //11 'Vampire95' //12 ]; $('#addBackgroundImage').click(function(){ canvas.setBackgroundImage('http://localhost/canvas/images/alabama.png', function() { canvas.renderAll(); }); }); $('#addText').click(function () { changetext(); }); function changetext(){ var xPos = document.getElementById('xPos').value; var yPos = document.getElementById('yPos').value; var color = document.getElementById('color').value; var mytext = document.getElementById('mytext').value; var textObj = new fabric.Text(mytext, { fontFamily: font[0], left: xPos, top: yPos, fontSize: 12, textAlign: "left", fill: color // Set text color to red }); canvas.add(textObj); canvas.renderAll(); }; $('.toggleWidth').click(function(e) { e.preventDefault(); var id = $(this).attr("href"); $(id).toggle(); }); jQuery.fn.extend({ slideRight: function() { return this.each(function() { $(this).animate({ width: 'show' }); }); }, slideLeft: function() { return this.each(function() { $(this).animate({ width: 'hide' }); }); }, slideToggleWidth: function() { return this.each(function() { var h = $(this); if (h.css('display') == 'none') { h.slideRight(); } else { h.slideLeft(); } }); } }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="card-control-box"&gt; &lt;div id="card-control-menu-box"&gt; &lt;div id="card-menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#canvas-image" class="toggleWidth"&gt;Image&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#canvas-text" class="toggleWidth"&gt;Text&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#canvas-font" class="toggleWidth"&gt;Fonts&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="card-worker-box"&gt; &lt;div id="canvas-image"&gt; &lt;h3&gt;Image&lt;/h3&gt; &lt;input type="text" name="background-image" /&gt; &lt;input type="button" value="add image" name="addBackgroundImage" id="addBackgroundImage" /&gt; &lt;/div&gt; &lt;div id="canvas-text"&gt; &lt;h3&gt;Text&lt;/h3&gt; &lt;input type="button" value="add text" name="addText" id="addText"/&gt; &lt;label&gt;Top&lt;/label&gt;&lt;input type="text" id="xPos" name="xPos" /&gt; &lt;label&gt;Left&lt;/label&gt;&lt;input type="text" id="yPos" name="yPos" /&gt; &lt;label&gt;Color&lt;/label&gt;&lt;input type="text" id="color" name="color" /&gt; &lt;label&gt;Text&lt;/label&gt;&lt;input type="text" id="mytext" name="mytext" /&gt; &lt;/div&gt; &lt;div id="canvas-font"&gt; &lt;h3&gt;Font&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="card-canvas-container"&gt; &lt;canvas id="cardmaker" width="500" height="225"&gt;&lt;/canvas&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="clearfix"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload