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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 35 results

  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', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', fill: false, borderColor: "red", backgroundColor: "red", data: [ {x:23,y:57}, {x:43,y:67}, {x:143,y:167} ] }, { label: 'My Second dataset ', fill: false, borderColor: "blue", backgroundColor: "blue", data: [ {x:12,y:76}, {x:23,y:89}, {x:143,y:167} ] }] }, options: { title: { display: false, text: 'Chart.js Line Chart' } } }; window.onload = function () { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); }; css: canvas { position: absolute; z-index: 0; } svg { position: absolute; z-index: 1; } body { background-color: white; } html: <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <head> <title> My cutoff chart </title> </head> <body> <canvas id="canvas"></canvas> <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style> #clickHandler { pointer-events: all; } </style> <path id="ship" d="m 100.09542,69.20104 h -83.5475 v -0.41351 -0.41351 l -0.595313,0.0828 -0.595312,0.0828 -0.01659,-0.66146 -0.01659,-0.66146 -0.380288,0.12526 -0.380288,0.12526 -1.890519,0.007 -1.890518,0.007 -0.556877,-0.50403 -0.556878,-0.50403 v -0.38141 -0.38142 l 1.06532,-1.21026 1.065319,-1.21027 -0.09501,-0.28554 -0.09501,-0.28554 -1.433331,-0.20539 -1.433331,-0.20539 -0.859896,-0.13733 -0.859896,-0.13733 v -0.38353 -0.38353 l -1.220114,-0.57352 -1.220114,-0.57352 -0.737049,-1.01747 -0.73705,-1.01747 -0.8116695,-2.57755 -0.8116695,-2.57756 -0.3901093,-1.98437 -0.3901092,-1.98438 -0.1825245,-1.65364 -0.1825245,-1.65365 h 1.5141537 1.5141538 l 0.132161,-0.50538 0.132161,-0.50539 2.753486,-0.18768 2.753485,-0.18767 v -0.35283 -0.35282 l 0.307053,-0.6739 0.307053,-0.67391 h 1.904977 1.904977 l 1.193236,-0.16355 1.193236,-0.16355 0.365047,-0.8067 0.365045,-0.8067 1.190625,-0.37783 1.190625,-0.37784 4.034896,-0.1393 4.034896,-0.13929 v -0.30579 -0.30578 l 0.849273,-0.74523 0.849272,-0.74522 1.393399,-0.14381 1.393397,-0.14381 0.16044,-0.5055 0.160438,-0.5055 -0.328146,-0.39539 -0.328147,-0.39539 0.311142,-0.31114 0.311142,-0.31114 1.80399,-0.10194 1.80399,-0.10193 0.314769,-0.87049 0.314772,-0.87048 0.939179,-0.17619 0.939175,-0.17619 0.380341,-0.91029 0.380341,-0.91028 h 0.365017 0.365016 l 0.1606,-0.41852 0.160599,-0.41851 v -0.99569 -0.99568 l 0.522388,-0.47276 0.522386,-0.47275 0.668239,0.43784 0.668237,0.43785 0.02929,0.45692 0.02929,0.45692 -0.05502,0.66146 -0.05502,0.66146 0.224168,-0.21512 0.224168,-0.21513 0.410602,-2.16612 0.410601,-2.16613 0.712267,-0.34439 0.712266,-0.3444 0.157782,-0.62865 0.157778,-0.62864 0.372999,-0.14314 0.372997,-0.14313 v -1.46351 -1.46351 h 0.264583 0.264583 l 0.0013,1.91822 0.0013,1.91823 0.169696,2.94481 0.169696,2.9448 2.130634,0.12334 2.130634,0.12334 0.101764,0.30529 0.101767,0.3053 h 0.882353 0.882354 l 0.418512,0.1606 0.418516,0.1606 v 0.50086 0.50086 h 5.277839 5.277839 l 0.07997,-1.38907 0.07997,-1.38906 2.513542,-0.17857 2.513541,-0.17856 3.79988,-0.51512 3.799877,-0.51511 0.180554,-0.29215 0.180555,-0.29214 0.606329,-3.31745 0.606333,-3.31746 0.393073,-0.39307 0.393073,-0.39308 h 0.852265 0.852268 l 0.317889,-1.18854 0.317886,-1.18855 3.459062,0.10402 3.459061,0.10403 0.169617,0.16961 0.169614,0.16962 0.143208,5.34668 0.142968,5.34667 1.717418,0.1323 1.717416,0.13229 0.08401,0.52916 0.08401,0.52917 0.1346,0.39688 0.13459,0.39687 0.25994,-0.46302 0.25993,-0.46302 h 3.9273 3.92729 l 0.1523,0.39687 0.1523,0.39688 h 1.63278 1.63278 l 0.35148,-0.46302 0.35148,-0.46302 0.008,-0.46302 0.008,-0.46302 h 3.28946 3.28947 l 0.16795,0.52916 0.16795,0.52917 h 6.59675 6.59676 v -0.52917 -0.52916 h 3.30729 3.30729 v -0.75275 -0.75274 l 0.48385,-0.43788 0.48386,-0.43788 h 0.40118 0.40118 l 0.46944,0.51872 0.46945,0.51874 -0.12644,0.73804 -0.12643,0.73804 -0.19802,0.46302 -0.19802,0.46302 4.72466,-0.003 4.72466,-0.003 0.99752,-0.16487 0.99752,-0.16486 -0.1725,-0.91953 -0.17251,-0.91953 0.35298,-0.21815 0.35298,-0.21815 0.21107,0.13044 0.21107,0.13045 v 1.04272 1.04272 h 1.29052 1.29052 l 0.28495,-0.34335 0.28495,-0.34335 0.14065,-2.7655 0.14064,-2.76551 0.1645,-2.11667 0.16451,-2.11666 0.91522,-1.12448 0.91522,-1.12448 h 0.24687 0.24687 v 1.98437 1.98438 h 1.05833 1.05833 v 0.26458 0.26459 h -0.24701 -0.24701 l -0.0837,0.71713 -0.0837,0.71715 -0.66145,0.18252 -0.66146,0.18253 1.24115,0.0264 1.24116,0.0264 0.17453,0.28239 0.17452,0.28239 -0.55578,0.14534 -0.55579,0.14535 v 0.74612 0.74613 l -0.8599,0.0829 -0.85989,0.0829 v 1.19063 1.19062 l 0.85989,0.0829 0.8599,0.0829 v -0.66891 -0.66892 l -0.53658,-0.28716 -0.53658,-0.28717 0.15532,-0.25131 0.15532,-0.25132 h 1.0271 1.02711 l 0.15347,0.24832 0.15347,0.24832 -0.46859,0.28798 -0.46858,0.28797 0.66146,-0.0733 0.66145,-0.0733 0.0677,-1.71979 0.0677,-1.71979 0.14895,-0.64766 0.14894,-0.64766 0.24235,0.38307 0.24235,0.38308 0.004,2.26219 0.004,2.26219 0.3175,0.3175 0.3175,0.3175 h 0.47625 0.47625 v 0.64362 0.64363 l 0.5268,0.1672 0.52679,0.1672 0.26696,-0.16498 0.26695,-0.16499 v -0.52916 -0.52917 l 0.26458,0.16352 0.26458,0.16352 v 0.51 0.51 l 0.8599,0.35945 0.8599,0.35943 0.36113,0.43546 0.36113,0.43546 -0.18881,1.25917 -0.18881,1.25918 -0.23314,0.43567 -0.23314,0.43568 0.65613,0.16468 0.65613,0.16467 2.1e-4,0.45798 2.1e-4,0.45798 0.75188,1.5875 0.75189,1.5875 1.23054,1.91823 1.23055,1.91823 0.33246,0.037 0.33247,0.037 0.97177,-0.0577 0.97177,-0.0577 0.29431,0.54992 0.29431,0.54992 h 0.63653 0.63654 l 0.18667,-0.30203 0.18667,-0.30204 0.15967,-2.1242 0.15967,-2.1242 0.33073,-0.10935 0.33073,-0.10936 5.3e-4,2.20487 5.3e-4,2.20486 3.0196,0.0151 3.0196,0.0151 0.4194,0.34806 0.41939,0.34807 1.4e-4,0.16604 1.3e-4,0.16604 -2.40702,-0.0934 -2.40701,-0.0934 -0.29187,0.29186 -0.29174,0.29187 2.23573,0.0403 2.23573,0.0403 0.26458,0.0615 0.26458,0.0615 1.91823,0.0305 1.91823,0.0305 v 0.42473 0.42473 l 4.16719,-0.17789 4.16719,-0.17789 1.51081,-0.27919 1.51082,-0.27919 0.40741,0.15633 0.40741,0.15634 v 0.48438 0.48438 l -2.40439,2.50049 -2.4044,2.50049 -1.84101,2.24895 -1.841,2.24896 -1.31085,2.60364 -1.31085,2.60364 v 0.63751 0.6375 l 0.8599,0.0355 0.8599,0.0355 1.05833,-0.0538 1.05833,-0.0538 0.92604,0.63314 0.92605,0.63314 -0.0719,0.87537 -0.0719,0.87537 -0.45725,0.7761 -0.45726,0.77609 -1.35008,0.89689 -1.35008,0.89688 -1.9519,0.5409 -1.95188,0.5409 z m 33.00145,-39.6875 h 0.1323 v -0.13229 -0.13229 h -0.1323 -0.13229 v 0.13229 0.13229 z m 20.54212,-7.82802 0.22768,-0.14071 v -0.24897 -0.24897 h -0.39688 -0.39687 v 0.22049 0.22049 l 0.16919,0.16919 0.1692,0.1692 z" /> <rect id="bg" x="-1%" y="-1%" width="102%" height="102%"/> <mask id="myMask"> <use xlink:href="#bg" fill="white"/> <use xlink:href="#ship" fill="black" /> </mask> </defs> <use xlink:href="#bg" mask="url(#myMask)" fill="chocolate" fill-opacity="0.5"/> <use xlink:href="#ship" fill="none" id="clickHandler" style="fill:none; stroke-width:0.264583;stroke:black;"/> </svg> </body> Here is a working code pen. So far so good, but I wasn't able to align the chart and the cutout properly. The desired position of the visible part of the chart is inside the blue rectangle: As I said, I'm not sure that I took the best approach for achieving this effect. And to be honest, my knowledge in front-end development and graphical design (using .svg files) are very basic. Any help will be greatly appreciated Thanks in advance, Julian
  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]; const fileURL = URL.createObjectURL(File); const cvs = document.createElement("canvas"); let ctx = cvs.getContext("2d"); const imgFile = new Image(); imgFile.src = fileURL; imgFile.onload = function(){ ctx.drawImage(imgFile,0,0); } const cvsURL = cvs.toDataURL(File.type, 0.3); $("#optImg").attr('src',cvsURL).css('width',80) }); </script> please assist
  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.w3schools.com/tags/tag_script.asp useless! https://www.w3schools.com/html/html5_canvas.asp also useless! This is so basic a feature you would think that there would be examples of this in some of your examples. but no! Here is the code I have been trying to center.....as you can see I have tried quite a few different methods. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> canvas { border:1px solid #d3d3d3; background-color: #f1f1f1; margin: auto; text-align: center; object-position:center } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } </style> </head> <body onload="startGame()"> <div class="center"> <script> var myGamePiece; function startGame() { myGamePiece = new component(30, 30, "red", 10, 120); myGameArea.start(); } var myGameArea = { canvas : document.createElement("canvas"), start : function() { this.canvas.width = 800; this.canvas.height = 600; this.canvas.x = 100; this.canvas.y = 50; this.canvas.style.cursor = "none"; //hide the original cursor this.context = this.canvas.getContext("2d"); document.body.insertBefore(this.canvas, document.body.childNodes[0]); this.interval = setInterval(updateGameArea, 20); window.addEventListener('mousemove', function (e) { myGameArea.x = e.pageX; myGameArea.y = e.pageY; }) }, clear : function(){ this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } } function component(width, height, color, x, y) { this.width = width; this.height = height; this.speedX = 0; this.speedY = 0; this.x = x; this.y = y; this.update = function() { ctx = myGameArea.context; ctx.fillStyle = color; ctx.fillRect(this.x, this.y, this.width, this.height); } } function updateGameArea() { myGameArea.clear(); if (myGameArea.x && myGameArea.y) { myGamePiece.x = myGameArea.x; myGamePiece.y = myGameArea.y; } myGamePiece.update(); } </script> </div> <p>Move the cursor inside the canvas to move the red square.</p> </body> </html> Please can you place more references to alignment as this issue has become somewhat annoying considering how easy this is in p5 javascript for instance. In p5 its - var canvas = createCanvas(1000, 350); canvas.position(x,y); So please make some kind of reference to centering js and <script> in some of the other pages using the term center, like <center> (yes I know its deprecated - but what are the alternatives?) as the search for this info is rather long. Thankyou in advance.
  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 uns) #02: Or why the distances to the individual boxes in the mobile design are so gigantic. #03: In mobile design, the W-Lan Icon Box and the text are below each other, but the distance is too big, and the text is no longer centered horizontally. I've been busy with this for a few days now and don't know what to do anymore. I've used a commercial Template to do this: Canvas | The Multi-Purpose HTML5 Template https://themeforest.net/item/canvas-the-multipurpose-html5-template/9228123?s_rank=1 This is the HTML Code of this section <!-- So Funktioniert's ============================================= --> <div class="page-section nomargin"> <div class="container clearfix divcenter center" style="max-width: 1150px;"> <h4 class="divcenter font-body"> Die moderne Kommunikation ist simpel.<br /> Da das Internet schon ohnehin zu unserem täglichen Leben gehört, lässt sich die Nutzung der telba Cloud sehr einfach gestalten. </h4> </div> <div class="row align-items-stretch divcenter center " style="background: #F9F8F7; max-width: 1150px; height: 400px"> <div class="col_half center" style="background: #EAF2F6 url(images/telba/wlan_crop.png) center center no-repeat; background-size: contain; height: 400px"> <h2 class="font-body ">So funktioniert's:</h2> </div> <div class="col_half col_last divcenter" style="background: #F9F8F7; height: 400px; padding: 5%"> <span class="font-body"> Ihre Cloud Lösung wird individuell nach Ihren Wünschen angepasst. Die Telefonanlage wird nicht vor Ort in Ihrem Unternehmen installiert, sondern wird Ihnen virtuell bereitgestellt. Unsere Kommunikationslösung wird in unserem Rechenzentrum betrieben, wodurch wir Ihnen unsere Leistungen, dank Cloud Computing, direkt über das Internet zur Verfügung stellen können. Über unser Internet Portal behalten Sie alles im Blick und können Ihre Aktivitäten leicht managen. </span> </div> </div> </div><!--So Funktioniert's ENDE --> <!-- Highlights ============================================= --> <div class="page-section nomargin"> <div class="heading-block title-center"> <h2>Highlights</h2> <span>das gibt es bei uns</span> </div> <div class="row align-items-stretch divcenter center" style="max-width: 1150px"> <div class="col-lg-4 d-none d-md-block" style="background:#DFEEF2 url('images/telba/lampe_crop.png') center center no-repeat; background-size: contain; height: 600px;"></div> <div class="col-lg-8"> <div class="row align-items-stretch clearfix noborder" style="background: #F9F8F7"> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">One Number</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Faire Preisgestaltung</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Moderne Kommunikation</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Skalierbarkeit</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Immer auf dem neusten Stand</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Schnelle, einfache Einführung</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Motivierte Mitarbeiter</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Betriebliche Flexibilität</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Standort- unabhängigkeit</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">innovative Arbeitsplatzmodelle</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Schnelles Reagieren auf Veränderungen</h3> </div> </div> <div class="col-lg-4 col-md-6 noborder" style="min-height: 150px"> <div class="feature-box fbox-center fbox-dark fbox-plain fbox-small noborder"> <h3 class="center-center center divcenter col-padding-height-top-lg">Bereitstellen der Leistung über das Internet</h3> </div> </div> </div> </div> </div> </div><!--Highlights ENDE -->
  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("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
  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" even when the images are identical. Is there an error in the way I'm comparing the images? Thank you
  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); } 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
  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>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
  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 doing this? A code sample would definitely be helpful Thank you
  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. p.s. didn't know where else to give feedback on this.
  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 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.
  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. 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
  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=$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
  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 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?
  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...