...

View Full Version : Text on Canvas



angelali
11-20-2012, 05:19 PM
Hi, I have an IFrame. Good. And I have a Canvas as well. Good again!

The user can write on the IFrame as I set the design mode ON. I am using document.execcomand to do the stuff, just like a simple text editor. I do not have issues on this. Here are my questions:

1/ What I want is, how to make the text written in the IFrame, appears on the Canvas? I mean, when the user is typing in the IFrame, the text is appearing simultaneously on the Canvas. If the user changes the text color, font color, bold, italic or whatever, of course the text also changes on the Canvas simultaneously. How to do that?

2/ Can I make all the elements draggable and resizable in the Canvas? I mean the text or anything but NOT the canvas?


Help!

rnd me
11-21-2012, 01:17 AM
canvas.drawText() ?

not sure what you want...

angelali
11-21-2012, 02:18 AM
I solved it... The issue is, you cannot save the canvas with its elements as image with dataURL if you drag a DIV or an image on it.

angelali
11-21-2012, 02:22 AM
RND ME, I went on your site, I looked your notepad. I did make a rich text editor... with more features and functionality including both HTML and design view. I am show you a screenshot.

rnd me
11-21-2012, 10:46 AM
RND ME, I went on your site, I looked your notepad. I did make a rich text editor... with more features and functionality including both HTML and design view. I am show you a screenshot.

cool. i made that 4 years ago and forgot about it, so i'm not too surprised that you can do better; that's the point of a demo.


if you want to see a better editor, try danml.com / vapor , although that too is a couple years old at this point. was built for firefox/win, but chrome supports a lot of its features and my right-click menu crapped out on FF some time ago... cest la vie...

my whole site is a rusted amateurish pile of junk afaic, a few good nuggets excepted. Most of the items on the site are 'weekend projects'; half finished with no incentives to trim out. i will be updating the site with some fresh new code and a whole new layout one day in the next year or so. once i got a real job, i stopped updating it.


still, since i wrote that stuff while learning, it might be good for others who are learning as well. But, many things have changed in the last 4-5 years, and if i had to write the apps over, i would probably do a better job. well, i sure hope i would do a better job, unless i've somehow gotten worse over the years. a lot of code is the same, and the image editor i wrote for a class project used to work only on FF beta 3, but now works on an ipad; gotta love standards and the companies that implement them.

anywho, thanks for checking it out, and i'm looking forward to those screen shoots.

angelali
11-21-2012, 10:56 AM
Here it is below in the attachment. By the way, do you know how I can make syntax highlighting in a text editor? If I put some html codes in an array, then make something like if these codes in the array are written in the IFrame of the text editor, it adds a color. Will it be good? I wanted line numbers as well.

rnd me
11-21-2012, 01:18 PM
Here it is below in the attachment. By the way, do you know how I can make syntax highlighting in a text editor? If I put some html codes in an array, then make something like if these codes in the array are written in the IFrame of the text editor, it adds a color. Will it be good? I wanted line numbers as well.

your editor looks nice. i don't like the "U" button (underline is bad for user because it looks clickable), but the rest is visually pleasant for having so many controls.

most HTML WYWIWYG editors use <div> or <p> to create line breaks.
you can use CSS2.1 generated content, numbering, in a :before psudo-element to display a number in front of those lines. the issue with that is that we often use <pre> or <code> for code, which means all the lines are in one tag, which means css numbering won't work.


look into codemirror, a syntax-highligted textarea replacement with many options including line numbers.

angelali
11-21-2012, 01:35 PM
I want to make my own line number. And I have not understood clearly on your CSS thing on it... can you elaborate?

rnd me
11-21-2012, 02:57 PM
I want to make my own line number. And I have not understood clearly on your CSS thing on it... can you elaborate?


<!DOCTYPE html><html><head>
<title>line numbered wysiwyg w/css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>

<style>
#data div { counter-increment: lines; background:#ccc; margin: 0; }

#data div:before { content: counter(lines); width: 2em; color:#888;
padding-right: 3px; font-family: monospace; display: inline-block; text-align: right;
}
</style>

<div id=data contentEditable >
<div>hello world</div>
<div>hola mundo</div>
</div>


</script>
</body>
</html>

tested in chrome.

angelali
11-21-2012, 03:20 PM
Lol, I just tested it on JsFiddle... This is not appropriate LOL as each time I pres enter, it does not show the next number. Perhaps, something like each time you press enter in the IFrame, it writes the number in the IFrame. This is not easy. I would create an online text editor lol if I now how to do that

rnd me
11-21-2012, 04:48 PM
Perhaps, something like each time you press enter in the IFrame, it writes the number in the IFrame.

that is what i saw when i tested the code.

when i click between hello and world, and press [ENTER] 1 2 3

it looks something like this:



1 hello
2 123
3 world



you may have to switch your WYSIWYG to use <P> or <DIV> instead of <BR>, since BR can't be numbered.

so, this may help:


<style>
#data div, #data p{ counter-increment: lines; background:#ccc; margin: 0; }

#data p:before ,
#data div:before { content: counter(lines); width: 2em; color:#888;
padding-right: 3px; font-family: monospace; display: inline-block; text-align: right;
}
</style>

as might this:

document.execCommand('insertBrOnReturn', false, false )


you should refer to http://dvcs.w3.org/hg/editing/raw-file/tip/editing.html#the-usecss-command
for how it's "supposed to be"

again, codemirror has line numbers and colored text. i have not seen a line-numbered WYSIWYG before, it doesn't really make sense.

the code i posted works on a wysiwyg editor if you stay away from fancy formatting like lists, images, headers, etc. you can still color the text inside a contentEditable to reflect syntax, but you'll need to brush and re-brush it every time you make an update to the text, and it can get polluted in edge cases involving paste, "crossing the streams" of Model and View...

codemirror does the best job of coloring unformatted text, but even it's not 100% perfect.


i know this isn't for the WYSIWYG viewer, but in a text editor, i'll sometimes pass a <textarea> this to function see line #s momentarily:




function previewLines(data){
var orig=data.value,
lined=orig.split(/\r?\n/).map(function(a,b){return b+"\t"+a;}).join("\n");
data.value=lined;
var oc=data.onclick;
data.onclick=function(){ data.onclick=oc; data.value=orig; };
}

// usage example for this page in firebug/F11 tools:
previewLines(vB_Editor_001_textarea);

angelali
11-21-2012, 05:07 PM
hey I viewed it on Chrome now and it works. This is a great example you did earlier with the CSS. But why it does not work on Firefox? Firefox does accept CSS3 ::before syntax.

angelali
11-21-2012, 05:15 PM
I did not know if CSS has such property.. seriously!

rnd me
11-21-2012, 05:52 PM
hey I viewed it on Chrome now and it works. This is a great example you did earlier with the CSS. But why it does not work on Firefox? Firefox does accept CSS3 ::before syntax.

they use <br> instead of divs.

you can kinda get around this with some regexps, but it's far from perfect:


<!DOCTYPE html><html><head>
<title>line numbered wysiwyg w/css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>

<style>
#data div { counter-increment: lines; background:#ccc; margin: 0; }
#data div:before { content: counter(lines) ' '; width: 2em; color:#888; text-align: right; padding-right: 3px; font-family: monospace;
display: inline-block; }
</style>

<button onclick="fix()">renumber</button>

<section id=data contentEditable tabindex=0>
<div>hello world</div>
<div>hola mundo</div>
<div> &nbsp; </div>
<div> &nbsp; </div>
<div> &nbsp; </div>
<div> &nbsp; </div>
<div> &nbsp; </div>
</section>

<script>

function fix(){
return data.innerHTML=
("<div>"+data.innerHTML.replace(/<br>/g, "&nbsp; </div>\n<div> &nbsp;") )
.split("</div></div>").join("</div>").split("<div><div>").join("<div>").split("&nbsp;&nbsp;").join("&nbsp;").slice(5)
}


</script>
</body>
</html>



this seems more promising, at the cost of losing list capability (if you care), but i can't work on it any more, i've got stuff to do...




<!DOCTYPE html><html><head>
<title>line numbered wysiwyg w/css</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head><body>

<ol id=data contentEditable tabindex=0>
<li>hello world
<li>hola mundo
</ol>

</body></html>

angelali
11-21-2012, 07:11 PM
Thank you, I wil try to make it. And see what it gives.

angelali
11-22-2012, 04:04 PM
Oh by the way, y canvas issues have not been solved.

Anyway, is there a method, where you are writing on a DIV, using document.execcomand, then you press a button it saves the DIV as image? Sadly, document.execommand does not work on canvas. Even you can save Canvas as image, but to write on it now is a pain in the a**.

angelali
11-22-2012, 04:13 PM
HOLY COW AND HOLY DEER! I know what I have to do. Simple lol, I will use Canvas to write. I put a textbox, give the value a variable, then put the variable in canvas and write like a BOSS.

Example:


<canvas id="canvas" width="200" height="200"></canvas>
<input type="text" size="25" id="lol"/>
<input type="button" value="write" onClick="writethecrap();"/>


<script>
function writethecrap () {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var loltext = document.getElementById("lol").value;
context.fillText(loltext, 20, 10);
}
</script>

Good?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum