Thread: HTML5 + JS project - Editor
so i'm making editor in html5 , javascript. know there others out there, wanted try , make on, using canvas object. wanted share code , here , i'm stating right now, it's licensed under gplv2, not v3, want under v2 , stay under v2.
here's code
what think?code:<html> <head> <title>canvas</title> </head> <body> <canvas id="editor" width="500" height="350" style="border:1px solid #000000; positoin:absolute;"> </canvas> <br/> <textarea id="code" onkeypress="javascript:writeincanvas(document.getelementbyid('code').value);"></textarea> <script language="javascript"> var canvas = document.getelementbyid('editor'); var ctx = canvas.getcontext('2d'); var ce_focused = false; var buffer = ""; //for cursor var cursorx = 1; var cursory = 0; //for letter positioning of cursor var letposx = 0; var letposy = 0; function init() { //initialize event listener typing on canvas. window.addeventlistener('keypress', ce_typing, false); canvas.addeventlistener('click', ce_focus, false); } function ce_focus(ev) { //tell whether or not we've clicked in editor //and want start typing if((ev.layerx <= 500) && (ev.layery <= 350)) { ce_focused = true; } else { ce_focused = false; } } function ce_typing(ev) { //if we're clicked in editor , start typing type if (ce_focused) { //prevent default actions ev.preventdefault(); var evtobj=window.event? event : ev; //distinguish between ie's explicit event object (window.event) , firefox's implicit. var unicode=evtobj.charcode? evtobj.charcode : evtobj.keycode; var actualkey=string.fromcharcode(unicode); if (unicode == 8) { //test backspace //location , positioning determined cursor follow buffer = buffer.substring(0, buffer.length-1); }else if (unicode == 13) { buffer += "\n"; }else if (unicode == 39) { buffer += "'"; } else { buffer += actualkey; } writeincanvas(buffer); } } function showcursor(x,y) { ctx.fillstyle = "black"; ctx.fillrect(x,y,5,11); //document.write(x + " " + y); } function writeincanvas(text) { //clear canvas, fill blue, set font , put text in it. ctx.clearrect(0,0,500,350); ctx.fillstyle = "blue"; ctx.font="10pt helvetica"; if (text.match('\n')) { //split text , find locations of \n var array = text.split("\n"); for(var y=1; y <= array.length; y++) { //iterate through , fill text on screen ctx.filltext(array[y-1], 5, 10*y+1); cursory = y-1; cursorx = math.round(ctx.measuretext(array[y-1]).width); } } else { //if not \n's add text ctx.filltext(text, 5, 11); cursorx = math.round(ctx.measuretext(text).width); } showcursor(cursorx+6,cursory*10+1); } init(); </script> </body> </html>
Forum The Ubuntu Forum Community Other Discussion and Support Ubuntu LoCo Team Forums Americas LoCo Teams Utah Team - US HTML5 + JS project - Editor
Ubuntu
Comments
Post a Comment