Jump to content

Search the Community

Showing results for tags 'canvas'.

The search index is currently processing. Current results may not be complete.
  • 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

Found 15 results

  1. I've seen this (and similar) code used to apply an SVG filter to an image. How do I use this code to apply an SVG filter to a canvas? The canvas' content may change often. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="darkGreen"> <feColorMatrix type="matrix" values="0 0 0 0 0 0 0.5 0 0 0 0 0 0 0 0 0 0 0 0 1" /> </filter> </defs> <image xlink:href="(url to image)" width="" height="" filter="url(#darkGreen)" /> </svg> Thank you
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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); }
  9. 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
  10. 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
  11. 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
  12. 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.
  13. The famous Mandelbrot set: http://slicker.me/fractals/fractals.htm
  14. 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 :
  15. 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
×
×
  • Create New...