Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><strong>Using Scrawl.js:</strong></p> <p>(Disclaimer: I am the developer of this library)</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Scrawl.js&lt;/title&gt; &lt;style&gt; body {margin: 1em;} img {position: fixed; visibility: hidden;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ol&gt; &lt;li&gt;Display an image in a canvas&lt;/li&gt; &lt;li&gt;Add text to canvas&lt;/li&gt; &lt;li&gt;Drag text around canvas&lt;/li&gt; &lt;li&gt;Change text via an input box&lt;/li&gt; &lt;/ol&gt; &lt;div&gt;Change text by typing in this box: &lt;input type="text" id="changetext" value="Hello world" /&gt;&lt;/div&gt; &lt;img src="img/penguin02.jpg" id="penguin" class="demo903" /&gt; &lt;canvas id="mycanvas" width="400" height="400"&gt;&lt;/canvas&gt; &lt;script src="js/scrawl.js"&gt;&lt;/script&gt; &lt;script&gt; window.onload = function(){ //import the image and create a sprite to display it scrawl.getImagesByClass('demo903'); scrawl.newPicture({ source: 'penguin', width: 400, height: 400, }); //construct a sprite to display the text //and a group for collision detection stuff var texts = scrawl.newGroup({ name: 'texts', }); var displayText = scrawl.newPhrase({ font: '24pt bold Arial, sans-serif', textAlign: 'center', textBaseline: 'middle', startX: 200, startY: 200, fillStyle: 'yellow', strokeStyle: 'black', shadowColor: 'black', shadowBlur: 8, method: 'fillDraw', text: 'Hello world', group: 'texts', }); //add event listeners to handle text drag-and-drop var here, myText; var getText = function(){ myText = texts.getSpriteAt(here); if(myText){ myText.pickupSprite(here); } }; var dropText = function(){ if(myText){ myText.dropSprite(); myText = false; } }; scrawl.canvas.mycanvas.addEventListener('mousedown', getText); scrawl.canvas.mycanvas.addEventListener('mouseup', dropText); //add event listener for changing the text var input = document.getElementById('changetext'); var updateText = function(e){ displayText.set({ text: input.value, }); }; input.addEventListener('keyup', updateText); //build an animation loop for updating the canvas var myPad = scrawl.pad.mycanvas; var animate = function(){ here = myPad.getMouse(); //drop the text if mouse moves out of the canvas area if(!here.active &amp;&amp; myText){ dropText(); } scrawl.render() requestAnimFrame(function(){ animate(); }); }; //start animation animate(); }; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Working demo: <a href="http://jsfiddle.net/KaliedaRik/VWFhb/" rel="nofollow">over at jsFiddle</a></p>
 

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