Jump to content

Search the Community

Showing results for tags 'Canvas'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

  1. For the past few days, I'm struggling with one Chart.js chart that I want to clip or mask with custom vector path. I was able to do something like what I want, but I think I'm missing something. The approach that I took is to create the chart in html (the traditional way, with html canvas ..etc) and then create a svg with the shape I want to cut off and then overlay the <canvas> and <svg> elements. This is what I was able to accomplish: js: var config = { type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'M
  2. unable to understand why black image is getting, please check the code and assist in generating the optimised image from file input <html> <head> <script src="jquery-3.4.1.min.js"></script> <title>Image Optimization</title> </head> <body> <div> <input type="file" id="imgFile" accept="image/*" capture="user"> </div> <div id ="test"> <img id="optImg" alt="optmisied Image"> </div> </body> </html> <script> $("#imgFile").change(function(){ const File = this.files[0
  3. I have spent many hours (over many days) trying to find out how to align a <script></script> within HTML5 specifically one that creates a canvas using . There is a page referring to centering images... https://www.w3schools.com/howto/howto_css_image_center.asp useless! There is a page referring to CSS Layout.... https://www.w3schools.com/css/css_align.asp useless! And heres another one on Canvas reference.... https://www.w3schools.com/tags/ref_canvas.asp useless! https://www.w3schools.com/tags/tag_canvas.asp useless! https://www.w3school
  4. Hey folks, I have created a picture that shows my problems with Responsive Design. When I make the window smaller or switch to a smartphone, the Responsive Design should make it look good, no matter what resolution the display has. I'm not a pro in HTML5 or CSS3, especially not when it comes to Responsive Design, so I still don't understand some things correctly. #01: For example, I don't understand why the box with the lamp or the complete headline with subtext and symbolic line under it disappears completely as soon as the website switches to mobile. (Highlights – das gibt es bei
  5. 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("cPrevie
  6. 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" e
  7. 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); }
  8. 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
  9. 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>P
  10. 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 doi
  11. 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.
  12. The famous Mandelbrot set: http://slicker.me/fractals/fractals.htm
  13. 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 :
  14. 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
  15. 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.
  16. 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 presen
  17. 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?
  18. 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
  19. 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
  20. 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
  21. 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.
  22. 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 docume
  23. 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
  24. 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
  25. 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
×
×
  • Create New...