Jump to content

Search the Community

Showing results for tags 'canvas'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 26 results

  1. I should specify in advance "Using pure JavaScript: I'm working on bare-bones HTML5 / CSS3 / JavaScript image editor and I'm ready to add a fileSave function. I'm going to use toDataURL() to allow the user to (1) save the file with a new JPG quality setting, or (2) save the file to PNG (I'm not aware of any options for PNG), or (3) save the current file format (typically JPG) and current quality setting. This last option will basically be the same thing as "right click" and "save file", but I would prefer something that will work from a button. How would I go about doing this? A code sample would definitely be helpful Thank you
  2. The example shown on fillStyle for patterns is wrong: This: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.rect(0,0,150,100); ctx.fillStyle=pat; ctx.fill(); Should be this: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var img=document.getElementById("lamp"); var pat=ctx.createPattern(img,"repeat"); ctx.fillStyle=pat; ctx.fillRect(0,0,150,100); This is the only way the repeat keywords work as they should. p.s. didn't know where else to give feedback on this.
  3. The famous Mandelbrot set: http://slicker.me/fractals/fractals.htm
  4. Hello & Thanks , I am trying to show a log from js to html page . document.write(oneTraceLine + " <br>");} But with the canvas element present , I don't seem to be able to do that . The scaled down code exerpt below is an example of what I am trying to do , but actual js code is much much larger . What can I do to get this puppy working ? I am having trouble getting the <code> tags to work . So , I'll try QUOTES next :
  5. JS, HTML for Project

    Hey all!A bunch of us have been putting together a web-based drawing app. In a nutshell, users connect in real-time to draw or chat on a sort of interactive whiteboard. Plenty of these are made in Flash, but we are determined to build it in JavaScript and HTML5; a site that immediately works on mobile (because it's not Flash), tailors to everybody from drawing tablet users to people who want to screw around, chat and play games — and with an awesome, modern look that other apps lack. The thing that works so well is these kinds of programs give you a lot of freedom of expression that I think by making more accessible we can popularize, and truly get a future-proof, lasting community going.Current drawing apps aren't too popular as they're not accessible to the host of many devices people use, chatting's not versatile or user-friendly enough to compete with chat sites, and their designs look god-awful like it's still the 90's. So with what we're after, there's insane potential in this project. This is the interface. I hope it gives you some sense of what we're aspiring for. It's predominantly HTML, CSS, and JS with server-client communication in HTML5's WebSockets, and some points in PHP. If you're good with any of these, message me here, Skype drawplanet or email form@drawplanet.net. I'll be more than happy to answer any questions. And if you're critical of anything, nothing's set in stone. It's very much a by the community, for the community type of project. Also on the hunt for people good with P2P networking, node.js, SQL, or server management.
  6. html5 canvas or svg

    hello, I am new to this forum and beginner in html5 language . My goal is to create a canvas or svg that consists of grid where I can add rectangles and circles with specific sizes and positions(by dragging objects). what I should use and how I can save all information like sizes and positions in my database to display or modify it in another page. is the example thanks.
  7. oval circles

    Hi I am trying to recreate the old Pong game using JS. I am getting this code function init(){ var canvas=document.getElementById('play');var ctx=canvas.getContext('2d');ctx.fillStyle='green';ctx.fillRect(0,0,800,400);var c = document.getElementById("play");var ctx = c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.fillStyle = "red";ctx.fill();}document.addEventListener("DOMContentLoaded", init, false); to produce a green rectangle with a red circle on it, except the circle becomes an oval if I define the size of the canvas in either JS or CSS. The present code is just to get the range, but the oval circle is annoying. Does anyone know why it is happening? I have attached the HTML file as well. Also since this is a JavaScript forum why cant I attach the original .js file? index.html
  8. Graphic & Animation

    I was guided toward svg when I found out about vector resizable feature... now that I went through the svg guide on w3school(which was just a guise of it). I come to wonder if I can use that over canvas api?What do you guys think?Gaming propose, which one would be efficient in formatting games?
  9. My First Game "Star Defender"

    Star Defender: Spawned of toxic waste and forged by fallen electrical wires, no one has ever laid eyes on the face of Star Defender - because he doesn't have one.... Star Defender is on a mission to save his planet and he needs your help. Link to game : http://www.gtrace.mobi/ChromeExperiments/StarDefender/ Thank you in advance if you give feedback
  10. canvas with image

    Hi; This is very basic so sorry for that, but, can I actually draw an image into a canvas from a file in the project folder? I want to have a click button which when clicked puts an image, .jpg in the canvas but my code below does nothing except put the image in the window next to the other controls. It is pretty much the code example in the w3 schools example page but it doesn't draw the image into the canvas when the button is clicked. I want to draw an image from the project folder rather than draw it from an image already on the page. Regards Bloodaxe. index.html testprojectcss.css

    After fetching my data from the database, all of them were fetched correctly, but i want to parse all of them to the next page after storing them in an array for easy access on the next page ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// <?php $array = array( $index_id, $weekly_gen_news, $what_is_env, $things_in_env, $need_to_clean, $how_does_env, $african_env, $env_culture, $env_and_event, $cnn_env, $weekly_gen_news ); header("location: echo.php?GetArray=$array"); exit();?> ///////////////////////////////////////////////////////////////////////////////////////////////////////////// and when i parse them, i only see this on the url---->......./ echo.php?GetArray=Array i tried to get them using $_GET['GetArray'] but its not working Also how can i display the variables individualy
  12. Minimap in canvas

    Hi, i want to make minimap of my world in game in canvas. I want to on this map could see where the points are the players. The map itself it would be screen over the world in my game. I suppose that the size reached by a few thousand pixels so was born the concept of the map was shifting. All of data will be downloading from database. How to make this? I don't have any ideas and I'm just a beginner in creating websites and web applications so please for your understanding and clear answers. I'll be very grateful and happy when someone help me to do such a thing.
  13. Sorry, this is really a beginner's question:I stumbled over the following piece of JavaScript code:var ctx=element.getElementsByTagName('canvas')[0].getContext('2d')...var w=ctx.canvas.widthI understand what the code is doing. However, I was surprised to find, that we can extract the canvas out of the context (i.e. ctx.canvas), because when looking at http://www.w3schools.com/tags/ref_canvas.aspI find the following:"This reference will cover the properties and methods of the getContext("2d") object"but looking below, I do not find an attribute "canvas" listed. Did I misunderstand the documentation, i.e. are there maybe even more attributes or methods available for the context object, than are listed on ref_canvas.asp? Or why has the "canvas" attribute been left out?
  14. function dosen't do anything

    I have run the gradient creation code on its own as the page loads, but now I want to use it in a button click event, so I have tried to enclose it as a function that the button onclick event calls. I get no response at all so I assume I need to pass something in as a parameter, but I cant see what. or does it need an event listener somewhere? index.html testprojectcss.css
  15. truncated gradient

    Hi; This may be a really obvious problem but as a newbie I am not seeing the answer. Thing is that when I run the code in the attached files I get a red to white gradient across about 4/5ths of the canvas then a black bar which is the underlying black <div> showing through. I have fiddled with the parameters but nothing changes it. does anyone have an idea? index.html testprojectcss.css
  16. Centering Canvas

    Hi, I am a beginner so not sure if this should be placed here or in CSS? Based on this example: http://jsfiddle.net/pmw57/as4UR/ ,have a canvas element, 640X640. How do you center this canvas so it appears in the middle of the screen? Currently it is displaying 0,0. Thank you for your help. writer1
  17. I seem to have gotten in over my head with this project. I spent most of the day just typing out code, without the ability to debug it due to slow browser speed. When I got off work I started correcting my syntax errors, which didn't take very long. Unfortunately, I have spent many hours trying to resolve some sort of logic error in the game which is apparently a very serious one, as it prevents any of my sprites from appearing. The fillRect() function is showing up perfectly, but the drawImage() function is not. I will go ahead and post the whole game code, as it is pretty concise by my own meager standards. I am a noob to javascript and coding in general, and this will probably show. That being said, I really expected this to work, and would certainly appreciate any help which is on offer. Upon previewing my post I noticed that spacing differences rendered my map array unreadable. I have decided to attach a text file (as I am not permitted to upload .js files) instead of pasting. I hope this is acceptable. script.txt
  18. <canvas> Tag

    I am having problems using the "<canvas>" tag as I am using HTML code from your website. http://www.w3schools...tml5_canvas.asp - Canvas Coordinates. Now, I have a piece of code that I have to find the "<canvas>" tag to add. In the code, I found out that a div creates the canvas. But how would I add an image that bounces across the screen when the mouse is over the canvas. I already have the co-ordinates of the mouse and the image inserted. I have attached the .html file and an image a.png. This should create an object and show you the co-ordinates of the mouse when it is over the canvas. And when it is not, it does not show any co-ordinates and shows a heading of PAUSED.index.htmlMany Thanks,[EDIT] Please could someone reply and post some code for this problem. I am only new to HTML. There is Javascript in there but that was in the canvas code here:-http://www.w3schools.com/html/html5_canvas.asp [/EDIT]Additional:-This doen't work in Internet Explorer 10 - well it didn't when I tried.
  19. Canvas and z-index

    Hi, I need to draw arrows to make links between elements of a table to make a kind of "route".I used canvas to do this and the result is exactly what I want graphically. However, I need to do actions on the table (like editing a cell by doubleclicking on it) but the canvas has got a z-index higher than my table to be visible so I can't access my table cells. Anyone has got an idea ? Thanks in advance. Matthieu.
  20. Hello,I want to make a script to check if there is anything drawn on a canvas.I tried to use this script: [/font][font=arial,helvetica,sans-serif]var ctx = document.getElementById("canvas").getContext("2d");[/font][font=arial,helvetica,sans-serif]/* Some other code, including some drawing code[/font][font=arial,helvetica,sans-serif]All drawings are black, with alpha value 255 */[/font] [font=arial,helvetica,sans-serif]var a = ctx.[color=#000000][size=1]getImageData(0,0,room.width,room.height)[/size][/color].data.indexOf(255); // to see if anything is drawn[/font][font=arial,helvetica,sans-serif] But for some reason it didn't work.I have also tested some other array methods, but they didn't work either on the imageData.dataIs there some way to make this work?Using a for loop instead would probably be to slow. Michiel
  21. Opera Does Not Get Canvas Handle

    Hi I'm a little new to JavaScript and I am trying to make a small program using an HTML5 canvas. However, when the following code is executed:function Prog(){ var self = this; this.init = function() { var d = document; self.canvas = d.getElementById("can"); self.c = self.canvas.getContext("2d");...}var p = new Prog();p.init();The code works in the other major browsers, but in opera, it throws an error saying "cannot convert self.canvas to object" or sometimes just "self.canvas is null"Thanks in advance
  22. I've been enthusiastically reading a lot of w3schools' tutorials and reference pages on HTML, which is a very big step in the right direction for HTML. Alright, so far so good. The <canvas> and <video> tags are amazing, and things like the technique used here is very exciting: http://www.w3schools...drawimage_video However, I've run into a bit of a show-stopper: the example above, and any similar ones I've been able to find, does not work on mobile devices - even ones that support both <video> and <canvas> by themselves. I haven't tried it on any iOS devices, but web searches indicate they would have the same issues. I've attached a screenshot of how the above example looks on an Asus TF300 tablet (Android 4.0.3). Am I the only one running into these issues, or has anyone else experienced similar problems? If so, were you able to solve it - and how? Regards, Mikkel
  23. Html5 Canvas Tutorial

    Hi all. I am starting a little blog at blogspot.. (any suggestions of who hosts better coding blogs?) Anyway, first up is an example I made detailing some of the caveats of getting started with html5 canvas. Unlike some of the 2nd-english givers out there, my english is good from morning ablutions on. I'm the Steve Carrel type who has a need to be praised. the address ishttp://programahead.blogspot.com the end result can be seen herehttp://respaceable.com/examplemove "usually the people you're worried about stealing your ideas, you should be shoving your ideas down their throats."
  24. Html5 Canvas Tutorial

    Hi all. I am starting a little blog at blogspot.. (any suggestions of who hosts better coding blogs?) Anyway, first up is an example I made detailing some of the caveats of getting started with html5 canvas. Unlike some of the 2nd-english givers out there, my english is good from morning ablutions on. I'm the Steve Carrel type who has a need to be praised. the address ishttp://programahead.blogspot.com the end result can be seen herehttp://respaceable.com/examplemove "usually the people you're worried about stealing your ideas, you should be shoving your ideas down their throats."
  25. Double The Number Of Balls

    Go to http://calinmocanu.webs.com/the_canvas/ball.htm No, that's not my experiment but I want to double the number of balls for more fun.