|
HTML - Canvas Filltext Question
I'm drawing text on the screen (mouse coordinates) in this example:
http://www.hindbrain.net/ex5.php In order to not have new text overlay old text and become unreadable, I have to clear a background rectangle and then draw the new text. Is there a way to clear the background rectangle so that it is not white or any solid color? Ie, is there a way to just clear it so that the original blue background is still there? thanks, William Similar Tutorialsi have to draw ball on canvas in html 5 depending on the input given by user in a textbox. ex: if a user enter 5 in a textfield, 5 ball should draw on canvas. My excuses for bothering you with this but I need a little push in the right direction to get started. I'm a 3d (technical) artist, but my HTML knowledge is minimal. What I have is: - A PNG image without alpha to be used as the background. - One or more PNG's with alpha to be composited on top of this background using the embedded alpha channels. I want to do this using the Canvas element and what I learned from searching the web is they often composite everything offscreen and then draw it to the Canvas. So if anyone could provide me with small example I would be eternally grateful. It's mainly the syntax that stumps me right now. Thanks in advance. Hey guys, I'm having trouble typing in Canvas. I tried combining the jquery keyboard (http://net.tutsplus.com/tutorials/ja...ss-and-jquery/) with the canvas in order to directly type on the canvas, but I'm having trouble doing so. Does anyone have any suggestions? I really appreciate any help you can give me! Below is pasted the code I have tried so far... <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Online Keyboard</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var x = 50; var y = 50; context.font = "12pt Calibri"; //context.fillStyle = "orange"; // text color context.fillText($(function(){ var $write = $('#write'), shift = false, capslock = false; $('#keyboard li').click(function(){ var $this = $(this), character = $this.html(); // If it's a lowercase letter, nothing happens to this variable // Shift keys if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) { $('.letter').toggleClass('uppercase'); $('.symbol span').toggle(); shift = (shift === true) ? false : true; capslock = false; return false; } // Caps lock if ($this.hasClass('capslock')) { $('.letter').toggleClass('uppercase'); capslock = true; return false; } // Delete if ($this.hasClass('delete')) { var html = $write.html(); $write.html(html.substr(0, html.length - 1)); return false; } // Special characters if ($this.hasClass('symbol')) character = $('span:visible', $this).html(); if ($this.hasClass('space')) character = ' '; if ($this.hasClass('tab')) character = "\t"; if ($this.hasClass('return')) character = "\n"; // Uppercase letter if ($this.hasClass('uppercase')) character = character.toUpperCase(); // Remove shift once a key is clicked. if (shift === true) { $('.symbol span').toggle(); if (capslock === false) $('.letter').toggleClass('uppercase'); shift = false; } // Add the character $write.html($write.html() + character); }); }); , x, y); }; </script> </head> <body> <body onmousedown="return false;"> <canvas id="myCanvas" width="578" height="200"> </canvas> <div id="container"> <textarea id="write" rows="6" cols="60"></textarea> <ul id="keyboard"> <li class="symbol"><span class="off">`</span><span class="on">~</span></li> <li class="symbol"><span class="off">1</span><span class="on">!</span></li> <li class="symbol"><span class="off">2</span><span class="on">@</span></li> <li class="symbol"><span class="off">3</span><span class="on">#</span></li> <li class="symbol"><span class="off">4</span><span class="on">$</span></li> <li class="symbol"><span class="off">5</span><span class="on">%</span></li> <li class="symbol"><span class="off">6</span><span class="on">^</span></li> <li class="symbol"><span class="off">7</span><span class="on">&</span></li> <li class="symbol"><span class="off">8</span><span class="on">*</span></li> <li class="symbol"><span class="off">9</span><span class="on">(</span></li> <li class="symbol"><span class="off">0</span><span class="on">)</span></li> <li class="symbol"><span class="off">-</span><span class="on">_</span></li> <li class="symbol"><span class="off">=</span><span class="on">+</span></li> <li class="delete lastitem">delete</li> <li class="tab">tab</li> <li class="letter">q</li> <li class="letter">w</li> <li class="letter">e</li> <li class="letter">r</li> <li class="letter">t</li> <li class="letter">y</li> <li class="letter">u</li> <li class="letter">i</li> <li class="letter">o</li> <li class="letter">p</li> <li class="symbol"><span class="off">[</span><span class="on">{</span></li> <li class="symbol"><span class="off">]</span><span class="on">}</span></li> <li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li> <li class="capslock">caps lock</li> <li class="letter">a</li> <li class="letter">s</li> <li class="letter">d</li> <li class="letter">f</li> <li class="letter">g</li> <li class="letter">h</li> <li class="letter">j</li> <li class="letter">k</li> <li class="letter">l</li> <li class="symbol"><span class="off">;</span><span class="on">:</span></li> <li class="symbol"><span class="off">'</span><span class="on">"</span></li> <li class="return lastitem">return</li> <li class="left-shift">shift</li> <li class="letter">z</li> <li class="letter">x</li> <li class="letter">c</li> <li class="letter">v</li> <li class="letter">b</li> <li class="letter">n</li> <li class="letter">m</li> <li class="symbol"><span class="off">,</span><span class="on"><</span></li> <li class="symbol"><span class="off">.</span><span class="on">></span></li> <li class="symbol"><span class="off">/</span><span class="on">?</span></li> <li class="right-shift lastitem">shift</li> <li class="space lastitem"> </li> </ul> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/keyboard.js"></script> </body> </html> Hello all, I am trying to replicate a style I have seen on the site listed below, where they appear to be using the CANVAS command to create a gradient top and bottom margin. I can seem to find anything online about how to do this but obviously they have figured it out. http://www.xtrememac.com/ Any ideas or pointing me in the right direction are greatly appreciated. Thanks! Alright, well I'm needing to resize an image. Not a scaled version, but a 'cropped' version. Like it's called canvas resize in photoshop ect. I hope someone knows what I'm talking about lol Is this possible? I'd like to draw a screen using the canvas methods and then overlay html hyperlinks on this (fullscreen) canvas. I have experimented with capturing the mouse click event and know where I clicked on the canvas, but now I'd just like to be able to hyperlink to places right from the canvas. It would be convenient if you could somehow embed hrefs there. thanks, William Hello, hopefully i can find help here I want to save my canvas-content to a single image-file. There are an approach using todataurl(), which works fine. But not if i draw an image-file (e.g. car.jpg or house.png) to the canvas additionally. It does not return the whole image? Here I have my simple example-code: <head> <script> window.onload = function() { var canvas = document.getElementById("theCanvas"); var context = canvas.getContext("2d"); context.fillStyle = "navy"; context.fillRect(0,0,20,20); var imagefile = new Image(); imagefile.onload = function () { context.drawImage(imagefile, 22, 0,60,60); } imagefile.src = "http://www.sign-arts.de/joomla/images/stories/print_proj/mediclin/icon1.gif"; window.open(canvas.toDataURL('image/png')); }; </script> </head> <body id="bodi"> <canvas id="theCanvas" width="500" height="200" > </canvas> </body> Only the HTML5-methods like fillRect() are rendered to the new window, why this is so? What im doing wrong? Thanx in advance for help bilinok I'm an intermediate PS user/css coder/etc but I haven't had to design many sites from the ground up. With that said, I now have to design a web site that will work for the 800x600 crowd. What canvas size do I use in Photoshop to work with? Also, what would be the canvas size to use designing for 1024x768 screen resolutions? Thanks. I need to go to the experts here , what I need to do is the following. I have an Adobe Edge animation, I need to take that animation along with a JQuery dropdown menu and put both on one html page. I have basic html knowledge to the point where the edge animation is saved as an html page ( edge automatically does this which includes all the Javascript files separately) So far I'm able to take the edge <div> and ad it to any html page as long as I copy the scripts to the head of that page. The trouble I'm having is adding the JQuery dropdown. It would be impossible for anyone reading this to know EXACTLY wht I mean without seeing the code, I do not want to add abunch of it or add a link to the files until someone replies and can actually look. any help? RD I have found what seems to be a rather big problem in the HTML canvas When drawing circles, and I presume all shapes, the size of the circle is different based on whether one is filling it, or sketching it. If we have a circle of radius 10 and line width k, and we decide to fill it, that line width will be evenly dispersed about the perimeter of the circle such that half the line width is inside the circle, and half is outside the circle. If, however, the same circle is sketched, the line width will still be the same, but it will now be dispersed entirely on the outside of the circle, thus making it larger. If I am wrong, and this is how figures are supposed to be drawn, or if I am simply not using the right settings, please let me know =) Hello, I am WGAnubis. I'm fairly new to the world of HTML, having taken a class on it last spring semester. Lately I have been designing sites for the group of online video gamers I run with and have come up with a rather cool looking demo of the site. We all like it but im not entirely sure on how to impliment the design in the way it looks. Im fairly certain I need to use frames but I dont think it would be able to retain the "connections" found in the following image: As you can see, each "window" is connected to each other by what looks like steel connectors. I'd really like to have the website look exactly or close to the demo, but if I use frames im not sure how that would be possible. Is their another way I can go about doing this or do I have to rethink the demo? Hi there, great website! been browsing the forums and searching and havent found what i am looking for, so here goes a post. I have my own website, and I also have a webmail account with my hosting company (ixwebhosting) what i want to do is make 2 little boxes on my website, where you put username and password, and have that then take you to the ixwebhosting webmail login and go in directly to my webmail, can that be done? any ideas or links much appreciated! thanks 4 ur time! Hello! I am new to this forum...sorry if I'm posting in the wrong place. I'm contructing my own jewelry website. I put in my ALT tags, and when I view the pages in my browser (I'm using Dreamweaver), the ALT tags don't show up. I don't know what I'm doing wrong. Here's a sample: <img src="images/citrine.jpg" alt="citrine necklace"> Am I doing something wrong? I would really appreciate knowing. I'm just about done with my website...this is the last thing I'm working on. KathyK27 I was looking through the code of this one website and i saw this: <script language="javascript"> <!-- insertPoll2('76375'); --> </script> I'm a bit confused by how this works, i dont know anything about javascript but this function here is used to create a poll and i want to do that on my website, but how does this work? Because the insertpoll2() function is Inside comments but also inside javascript braces. What's going on here? Thanks! Hi, I was wondering if it is possible to create an image that floats where ever you put it on the page. For example, it would float above this text, blocking it out. Basically I want it to ignore anything around of underneath it. I would also like it not to use scripts, if possible. Oh and one more thing, is it possible to do this between the body tags only? Thanks! Is there anything wrong with thia code? <h1><font color="000000"><em>Recycle With Us</em></font></h1><br clear="all" /> Shouldn't the <h1> tag be closed last? Thanks, Karen Hi guys! Im new to this forum so don't expect much. Im wandering is it possible to load html document without your browser or an html editor. cheers Connor can any1 plz tel me k whn we give a background image to an html file can we change its type frm tile to stretch or center? if yes, hw ? plz tel me.... Hey guys sorry to post another question so fast I just am kind of lost with this whole html thing but I'm learning fast =). Ryschwith was more then helpful with my last one so hats off to him. Here is my next problem. A lady here at the company wants me to add a link into our site that says "Job Application Form" and when you click it you download a .XLS file for vendors and customers to fill out. I know this is probably a pretty easy thing but I have no clue on how to position it in a place I want or where to store the file itself and how to point to it. I have googled a couple things but they were honestly above my head and seemed way too complicated for what I was trying to do. Is there a simple method for this? you can look at our site at www.qcrepro.com. Also i am using pagebreeze right now because they won't purchase me any decent software, is there a better free program to use? Thanks alot for helping out. -Joe I think PHP is a great thing...just frustrating at times - eh, we all get frustrated sometimes. I never get to vent to anyone about my lack of understanding web design. I did indeed try this navigational menu on a website...I think it's a really neat idea, actually - boy, can this ever save some time. However I've ran into a small little problem - I'm sure an even medocre-level designer will point out some obvious problem I'm doing that is just going over my head. The following URL: http://www.conversationalhypnosis.net/navigation.php I have setup a test to see if the navigational menu icons to the left would work, and voila! They did! But there's this little bugger that looks like this: that's sitting right on top of my menu...and it's putting a little space in. See it there? Again, the URL is http://www.conversationalhypnosis.net/navigation.php The menu 'block' should be flush up against the header block. You'll see what I mean - it's much easier understoot when simply looked at vs. explaining it. I put the following code in to "navigation.php" where I wanted the menu to appear: <?php include("navigation.html");?> Right? I also made sure "navigation.html" was uploaded (and obviously it is because you can see it when you go to the "navigation.php" page.). Any helpful comments to this would also be greatly appreciated! P.S. Is this forum the best one to post a question about tables/columns? I'm using a web template that I "think" uses tables (The same site above)...right? There's a column along the right-side of the page that goes all the way down (as needed) the page...I'd like to put an RSS feed there with updated content - but the only problem is sometimes, depending on the RSS feed headline/description, the column will expand toward the center of the page. This in turn screws up the look of the actual "content" of the page (which is to be the text in the "middle" if you will). Any ideas on this? If I should direct this "tables" question elsewhere please let me know and I'll gladly comply! I'm currently using Microsoft Expression web designer...I'm still in the process of finding "the best one". I made sure the "No Wrap" was NOT checked in that right-column, BTW. |
|||||||