Jump to content

Text On Canvas


Recommended Posts

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?




Link to comment
Share on other sites

Hmm well at a guess, I would say given canvas and execCommand are two completely different things, you'll not be able to have the changes "automatically" reflected. You will need to write a common interface you can use to fire commands, that will in the background translate each command into instructions to the canvas and execCommand() calls.

Link to comment
Share on other sites

Ok, I have an idea, I will use a DIV. I will set it to contenteditable = true. Then I will write my text in it using document.execcomand. After that, I will drag and drop the text written to place it on the Canvas.


I think its a good idea. I want to know now, how to drag and drop only the content in a DIV? Not the entire DIV but only the content like the text for instance. I know how how to make the drag and drop using JQuery UI, but not something in a container.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.