Controlling the text size in the canvas (textarea) - javascript

I want to create a canvas that displays text from textarea.
I have a problem with controlling the size of the text in textarea.
In other words, I want the user to choose the size of the text then write it in the text area which in turn will be displayed on the canvas once the button is clicked.
I tried this code but there is a problem i do not what is it.
Here is a sample of the code:
<script>
var y = 30;
function pasteText()
{
Text=document.getElementById('textarea').value;
var x = 30;
var lineheight = 15;
var lines = Text.split('\n');
$("#clr2 font").click(function (){
context.fillStyle=$(this).css("color");
});
$("#clr3 font").click(function (){
context.font=$(this).css("font-size")+ "Arial";
});
for (var i = 0; i<lines.length; i++)
context.fillText(lines[i], x, y + (i*lineheight) );
y+=38;
}
</script>
<body>
<canvas class="canvas" id="canvas" width="600" height="200" style="border:1px solid"> </canvas>
<font id="clr3">
<font style="font-size:9pt;"> Small</font>
<font style="font-size:16pt;"> Medium</font>
<font style="font-size:24pt;"> Large</font>
</font>
<textarea name="textarea" cols="72" rows="6" id="textarea" value="Type the text here" ></textarea>
<input type="button" name="paste" value="Paste on the canvas" onClick="pasteText()"/>
<script type="text/javascript">
var container = layer2.parentNode;
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
</script>
</body>

I am sure that the problem is in context.font
because context.font accepts the size and the family of the font.
I am not sure if what I wrote in my code is the correct syntax
context.font=$(this).css("font-size")+ "Arial";

You have quite a lot of problems in your code, some that pop immediately:
The for loop code in not enclosed in braces { }
The click handlers are defined inside the pasteText function and thus will only be registered after the user clicked the paste text button.
the <font> tags are not standart tags and some browsers, especially IE won't like it.
update:
Is it possible that what's missing is a space between the font size and the font face? try to add a space before the Arial:
context.font=$(this).css("font-size")+ " Arial";

Related

JQuery line numbers on Textarea with wrapping support

I am working on a textarea with line numbers. Now I found a great little script. http://jakiestfu.github.io/Behave.js/
Demo here: http://jakiestfu.github.io/Behave.js/examples/example-hook-linenums.html
The one feature I am missing is the ability to enable line wrapping.
Of course I can add wrap="on" to the textarea, and that indeed offers wrapping, but the line numbers are then messed up.
Any idea how I could add support for wrapping whist keeping the line numbers correct?
Try this:
<!DOCTYPE html>
<html>
<body onload="keyDown()">
<div class="container" style="width:300px;">
<div id="numbers" style="float:left; background:gray; width:20px;"></div>
<textarea onkeypress="keyDown()" rows="1" style="line-height:20px; display:block; float:right; overflow:hidden;" id="ta"></textarea>
</div>
<script type="text/javascript">
function keyDown(){
var taLineHeight = 20; // This should match the line-height in the CSS
var taHeight = ta.scrollHeight; // Get the scroll height of the textarea
ta.style.height = taHeight + "px"; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
var numberOfLines = Math.floor(taHeight/taLineHeight);
var inner= "";
for(var i=1; i<=numberOfLines; i++)
inner += "<div>"+i+"</div>";
document.getElementById("numbers").innerHTML = inner;
}
</script>
</body></html>

Move element created to textarea

I would like to link the 2 scripts to send the result of the first to the clipboard, using the second script. Both work but separately
Thank you, sorry if I am not clear.
<html>
<body>
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var h = document.createElement("H1");
var t = document.createTextNode("It works");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<script type="text/javascript" src="ZeroClipboard.js">
</script>
<textarea name="box-content" id="box-content" rows="10" cols="70">
Will be copied to clipboard.
Line2.
Line3.
</textarea>
<br /><br />
Simply by changing .value of textarea:
document.getElementById('box-content').value = "It works";
You can not place a tag in textArea tag.
The <textarea> tag defines a multi-line text input control.A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).The size of a text area can be specified by the cols and rows attributes, or even better; through CSS' height and width properties.
HTML textarea
Instead you can place text only in areatag.
function myFunction() {
//var h = document.createElement("H1");
var t = document.createTextNode("It works");
//h.appendChild(t);
document.getElementById('box-content').appendChild(t);
}
myFunction();
<textarea name="box-content" id="box-content" rows="10" cols="70"></textarea>

How to set the cursor in EaselJS, with mouseover enabled?

How can I set the cursor for a canvas when using EaselJS?
After a lot of debugging, I managed to figure out the problematic code: stage.enableMouseOver(). I am using stage.enableMouseOver() because I need to be able to mouse over various elements placed on the stage. However, I've found that subsequently trying to set the cursor for the canvas fails to do anything. stage.canvas.style.cursor = "text" does nothing, as well as stage.cursor = "text". However, stage.canvas.style.cursor works when stage.enableMouseOver() is commented out.
This doesn't work:
var stage = new createjs.Stage("canvas");
stage.enableMouseOver(); // comment out this line to get it to work
$("button").click(function() {
stage.canvas.style.cursor = "text";
});
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="change-cursor">
Use text cursor instead of default
</button>
<br>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>
How can I get my chosen cursor to appear, without removing stage.enableMouseOver()?
Example that does work, but comments out stage.enableMouseOver():
var stage = new createjs.Stage("canvas");
// stage.enableMouseOver();
$("button").click(function() {
stage.canvas.style.cursor = "text";
});
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="change-cursor">
Use text cursor instead of default
</button>
<br>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>
For those which are working with Animate CC, set the cursor before you enable mouse over:
stage.cursor="pointer";
stage.enableMouseOver(20);
There is a cursorproperty available in EaselJS, check the example below:
var stage = new createjs.Stage("canvas");
stage.cursor = 'text';
var bgShape = new createjs.Shape();
bgShape.graphics.beginFill("red").drawRect(0, 0, 100, 100);
stage.addChild(bgShape);
stage.enableMouseOver();
#canvas {
cursor: text;
}
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<canvas id="canvas" width=100 height=100 style="background-color:whitesmoke"></canvas>

Text in canvas to show in timed sequences using jQuery?

Fiddle: https://jsfiddle.net/6e6nwkpv/
I want to make the hidden canvas show, and the footer hidden when I click the button 'No.' But somehow they end up both disappearing.
Bonus: how does one make java words on html canvas appear(and disappear) in a time sequence?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<body>
<div id="canvas" style="display: block;">
<canvas id="myCanvas" height="300" width="500"></canvas>
</div>
<div id="buttons">
<button class="clickBoo" style="margin-top: 40px;">No</button>
</div>
<footer class="change">
Revised June 7th
</footer>
</body>
$(document).ready(function() {
$(function() {
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.font="30px Helvetica";
ctx.fillStyle = "white";
ctx.fillText ('Boo!',400,50);
ctx.fillText ('Boo!',10,200);
ctx.fillText ('Tea?',300,200);
ctx.fillText ('No?',200,400);
ctx.fillText ('Sorry if I scared you.',20,40);
}
});
$(".clickBoo").click(function() {
$(".change").toggle("changed");
$("#myCanvas").toggle("show");
});
});
There are several issues with this code.
As #Jackson suggest, you have used wrong jquery function toggle() instead of toggleClass().
Secondly, your footer has margin-top property set to -700px which cause this element to disappear since your canvas and "No" button in summary have about 400px height. So your footer is rendered about 300px above the screen.
By default your canvas is shown but it is rendered with empty content. So applying show class to your canvas does nothing.

canvas drawImage of a div

I am trying to draw an image on to a canvas. My source is a div that has a collection of text and images. Is this possible to do? I have tried to put some code together but it failed as the canvas is empty.
Div
<div id="puzzle">
Some text
<img src="sky" />
text text
<img src="sun.png />
</div>
code
<canvas id="mycanvas" width="300" height="150"></canvas>
var canvas = document.getElementById("mycanvas");
var ctx = ccanvas.getContext("2d");
var img = document.getElementById("puzzle");
img.onload = function(){
ctx.drawImage(img,0,0,40,40);
}
Change
ccanvas.getContext("2d");
to
canvas.getContext("2d");
Otherwise, this seems to be what you're looking for: Can you take a "screenshot" of the page using Canvas?
More specifically: http://html2canvas.hertzen.com/
write id=puzzle inside img tag

Categories

Resources