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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 31 results

  1. This code works perfectly on a desktop or laptop, and on non-iOS mobile devices. It takes a thumbnail sample of an edited image and displays it at full size in a new canvas. On iOS, I just see a blank screen where the canvas should be. function click5() { document.getElementById("preview").style = "visibility:visible;"; document.getElementById("cPreviewCaption").style = "font-size:90%; font-weight:550; text-align:center; color:#FFFFFF; padding-top:6px;"; // Apply change to preview image which will open beneath thumbnails var cP = document.getElementById("cPreview"); var contextP = cP.getContext("2d"); var cO = document.getElementById("cOriginal"); var contextO = cO.getContext("2d"); var imgData = contextO.getImageData(0,0,cO.width,cO.height); var data = imgData.data; //read full size image //similar image read/write code works fine in another image filter so this does not appear to be the issue for (i = 0; i < data.length; i += 4) { red[i] = imgData.data[i]; green[i] = imgData.data[i+1]; blue[i] = imgData.data[i+2]; alpha[i] = imgData.data[i+3]; } //set adjustments represented by user interaction with thumbnails for (i = 0; i < data.length; i += 4) { red[i] = red[i] + finalRedAdjust; if (red[i] < 0) red[i] = 0; if (red[i] > 255) red[i] = 255; green[i] = green[i] + finalGreenAdjust; if (green[i] < 0) green[i] = 0; if (green[i] > 255) green[i] = 255; } //write full size image with adjustments to memory for (i = 0; i < data.length; i += 4) { imgData.data[i] = red[i]; imgData.data[i+1] = green[i]; imgData.data[i+2] = blue[i]; imgData.data[i+3] = alpha[i]; } //write image in memory to file contextP.putImageData(imgData, 0, 0); //add borders for canvases. document.getElementById('cOriginal').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:hidden; display:none;"; document.getElementById('cPreview').style = "border-style:solid; border-color: #C0C0C0 #C0C0C0 #606060 #606060; visibility:visible; display:block;"; //Scroll page to preview image location.hash = "null"; location.hash = "previewAnchor"; } // End Table Click Event Functions I have tried this with small images, so dimensions and file size do not appear to be the issue. Thank you
  2. I'm trying to use Base64 to compare two images to see if they are identical. The images are accessed using: var thumb5Original = ""; var thumb5Edited = ""; thumb5Original = canvas5.toDataURL('image/png'); thumb5Edited = canvas5.toDataURL('image/png'); I then check them using this: if (thumb5Original.toString() == thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Original Image"; if (thumb5Original.toString() != thumb5Edited.toString()) document.getElementById('tHeader5').innerHTML = "Edited Image"; The problem is, I'm getting "Edited Image" even when the images are identical. Is there an error in the way I'm comparing the images? Thank you
  3. This should be so simple... I am using a canvas variable here (i) without any problems: for (i = 1; i < 10; i++) { c = document.getElementById("canvas" + i.toString()); context = c.getContext("2d"); context.drawImage(image,0,0,c.width,c.height); } But I cannot seem to get it right here: function clicked(thumbNumber) { //drawImage() in canvas5 using canvas1 as the source var canvasNumber = "canvas" + thumbNumber.toString(); canvas5.getContext('2d').drawImage(canvasNumber, 0, 0); } When I step into it and pass ""canvas" + thumbNumber.toString()" it's correct (for example, "canvas1"). But when it hits the next line, where "canvas1" is used, it grinds to a halt with the error: "color.html:332 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at clicked (color.html:332) at HTMLTableCellElement.onclick (VM548 color_balance.html:769) So, apparently it's not recognizing "canvas1" which is on line 332. If I hard code "canvas1" it works fine, but that's not practical here. I have tried at least a half dozen variations on a theme at "canvas5.getContext('2d').drawImage(canvasNumber, 0, 0);" but nothing seems to make any difference, I'm not giving the browser (Chrome Version 64.0.3282.186 (Official Build) (64-bit) on Windows 7 Pro) what it wants to see. Thank you in advance
  4. I have resized an image to fit inside a canvas without any problems. However, now I need to resize a canvas without resizing the image that it contains. How do I do this? Thank You
  5. My canvas z-index is not working, the canvases are both showing up. Canvas1 displays then canvas2 displays beneath it. HTML: <!-- Canvas locations --> <div id="canvasDisplay" style="position:relative;"> <canvas style="z-index:1; position:relative;" id="canvas1" width="1" height="1">Your browser is too old to support this feature. <br>Please consider updating to a modern browser.</canvas> <canvas style="z-index:2; position:relative;" id="canvas2" width="1" height="1">Your browser is too old to support this feature. <br>Please consider updating to a modern browser.</canvas> </div> This displays canvas1 properly. However, when using JavaScript to hide canvas1 behind canvas2, I get both canvases. JavaScript: cnv1.style = "z-index:2; position:relative;" cnv2.style = "z-index:1; position:relative;" I'd appreciate any assistance. Thank you
  6. 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
  7. 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.
  8. The famous Mandelbrot set: http://slicker.me/fractals/fractals.htm
  9. 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 :
  10. ???

    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.
  11. sami20722

    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.
  12. bloodaxe

    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
  13. L8V2L

    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?
  14. Gtrace

    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
  15. bloodaxe

    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
  16. francis Aneke


    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
  17. michal16202

    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.
  18. 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?
  19. bloodaxe

    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
  20. bloodaxe

    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
  21. writer1

    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
  22. 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
  23. LucasMars123

    <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.
  24. Matt4ll1ca

    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.
  25. 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