|
HTML - Canvas Html5 - Saving As Image!?
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 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. 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 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> 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. 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 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. 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 Hey folks, I have a background in traditional enterprise software, and I am trying to gain expertise on newer technologies. I will greatly appreciate, if you could help me understand, when to use HTML5, when to use Flash and when to use Silverlight. If you could point to some tools etc that will be helpful. Thanks for your help hi everyone, Can anyone provide me canvas tutorials? I am keep to update more knowledge on html5 and its tags. If you can provide me related information. Thankyou. Heya peeps. I have a problem I'm trying to overcome as shown below (From another thread): I'm in the process of building a website where audio can be purchased and downloaded. I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle. Is there a way of doing it? All I want is a basic play/pause/stop button. To control a piece of sound. It seems that I may be able to achieve this using HTML 5, but I'm worried that people won't be able to read it with there browsers. Am I mistaken? 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 =) Hi, I am doing my final year project and am comparing two technologies (HTML5 -JavaScript and Flash -ActionScript). It would be greatly appreciated if you could take a few minutes to answer my survey: http://www.surveymonkey.com/s/CLVC23Z Thank You I was quite surprised to discover that a lot browsers are already starting to support HTML5... While the support isn't comprehensive, and it isn't universal - it does seem to at least work reasonably well - at least for those elements that are not tied to media: http://www.brucelawson.co.uk/2009/re...ml-5-wai-aria/ I'm already thinking about making use of HTML5 in new projects... I quite like the idea of <header> and other elements. Hi, Im tryin to use html5 video so my video can be watched by most browsers and cell phone OSs. Having an issue. the link working in Safari (on win) but not in FireFox http://beerdiaries.com/html5/html5.html any idea why? thanks Hi all, I have a web site that has some html tags and it works fine in Chrome and Firefox, however in IE8 and IE9 it just won't load any resources (stylesheets and javascript) and it gets completely broken. Does anyone know what the problem is? The doctype and html tag are declared as following: Code: <!DOCTYPE html> <html lang="en"> and the content type: Code: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Greetings, Can some one explain me the difference between HTML4 and HTML5? what is the content management system, and what are the benefits of CMS? Do you heard the word Joomla? i heard somewhere this is a war.. can I ask (not to familiar with html5) what about html5 encroaches on flash? what new elements/features? If it does compensate i know Jobbs will be pushing the hell out of it (html5) Hi, new to the forums here. I made this website from a free template and I'm very happy with it. In IE8 it looks like garbage though, and I'm wondering if anyone can tell me how to change the code to get it to render somewhat well. (perfection not required) I would gladly paypal someone some cash that can help me out. URL: www.sharpeyeproductions.com I would like to get the tables below the main graphics fixed. The other pages on the site seem to render acceptably in IE8. Thanks for helping out a newbie everybody. |
|||||||