Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement' [JS] [jQuery]

See also questions close to this topic

• Best practice for returning "nothing" from a ternary expression if falsy?

  This is the ternary condition spec from mdn:

  condition ? exprIfTrue : exprIfFalse

  Often I find myself wanting to check if something is true, but I just want to do nothing with the falsy side of the expression. But I'm not sure how to write this:

  (someVariable) ? callFunction(someVariable) : donothing but keep running the script

  Should I use 'false', 'null', '', 'undefined' or something else?

  The editor gives me an error if I just leave it open without anything to the right of the :
• Fetch API data with chain of .then methods, but data is not passing through to the next .then

  I'm making three http get requests to create an array of unique objects. I'm sharing an example with a random API, not quite the same, but it's captures the essence: Codepen Example The main bug lies in the last 2 then methods of the getData function.

  In the getData function, I pass the sorted list of users to the getUniqueGender function, where it fetches more data objects and pushes the first "unique" user by gender to the uniqueUsers array. The getUniqueGender function returns the uniqueUsers array but it doesn't seem to be doing that, why? I've added a console.log in line 28 (Codepen Example) to check if it's ready pushing the user into the array and it's doing so but it's returning an empty array to the next then method. In my actual code, the array passed to the next then method can be printed to the console but I cannot do any computation from that point on, it prints the array.length as 0 to the console.

  Please help me debug this. I've been trying to debug this for days... :(

  let uniqueUsers = [];
  let finalUsers = [];
  
  function sortUsers(arr) {
    /*dummy function to show the synchronous step*/
    return arr;
  }
  
  function getUniqueGender(arr) {
    if (arr.length > 0) {
      for (let user of arr) {
        fetch('https://api.randomuser.me/?nat=US&results=${arr.length}')
          .then((res) => res.json())
          .then((json) => json.results)
          .then((results) => {
          if (results.length > 0) {
            for (let res of results) {
              if (!uniqueUsers.some((uniqueUser) => uniqueUser.gender === res.gender))                   {
                //console.log('users gender is unique so its added');
                //console.log(res.gender);
  
                let editedUser = {
                  gender:  res.gender ,
                  email:  res.email ,
                };
  
                uniqueUsers.push(editedUser);
                console.log(uniqueUsers)
  
              } else {
                //console.log('users gender is NOT unique so its NOT added');
                //console.log(res.gender);
              }
            }
          }
        });
      }
      //console.log(uniqueUsers) //this work in my actual code...
      return uniqueUsers;
    } else {
      return uniqueUsers;
    }
  }
  
  function appendInfo(arr) {
    console.log(arr) //this works in my actual code...
    
    for (let uniqueUser of arr) {
      fetch('https://api.randomuser.me/?nat=US&results=1')
        .then((res) => res.json())
        .then((json) => json.results)
        .then((randomUser) => {
        let editedUniqueUser = {
  
          gender:  uniqueUser.gender ,
          email:  uniqueUser.email ,
          nat: randomUser.nat
  
        };
        finalUsers.push(editedUniqueUser);
      });
    }
    console.log(finalUsers)
    return finalUsers;
  }
  
  function getData() {
    fetch('https://api.randomuser.me/?nat=US&results=5')
      .then((res) => res.json())
      .then((json) => json.results)
      .then((users) => sortUsers(users))
      .then((sortedUsers) => getUniqueGender(sortedUsers))
      .then((uniqueUsers) => appendInfo(uniqueUsers))
      .then((result) => console.log(result)) //why this doesn't work??
      .catch(console.log);
  }
  
  getData()
  

  

  
• Calling multiple files from the same folder in a single file using module exports in Node

  I'm trying to call multiple files from a single index.js file

  Here is the current file structure

  The index.js file:

  const ApplicantRegister = require("./ApplicantRegister");
  const ApplicantResidency = require("./ApplicantResidency");
  const ApplicantPersonalDetails = require("./ApplicantPersonalDetails");
  const ApplicantContactDetails = require("./ApplicantContactDetails");
  const ApplicantEducation = require("./ApplicantEducation");
  
  const models = {
    ApplicantRegister,
    ApplicantResidency,
    ApplicantPersonalDetails,
    ApplicantContactDetails,
    ApplicantEducation,
  };
  
  module.exports = models;
  

  Inside new.test.js

  const {
    ApplicantRegister,
    ApplicantResidency,
    ApplicantPersonalDetails,
    ApplicantContactDetails,
    ApplicantEducation,
  } = require("../models");
  

  The files in the models folder contain a single class (example):

  class ApplicantRegister {
    constructor(page) {
      this.page = page;
    }
  
    async navigate() {
      await this.page.goto(
        "https://www.google.com"
      );
    }
  }
  

  Which I call in new.test.js:

  test("Navigate to page", async () => {
      const register = new ApplicantRegister(page);
      await register.navigate();
    });
  

  I get the error: TypeError: ApplicantRegister is not a constructor

  When I call the files individual (const ApplicantRegister = require("../models/ApplicantRegister") and add module.exports to the bottom of the individual files, it works.

  Why does it give me the error when I try and require the files from a central file?
• How can I check my textarea at first and display something using JS after run the website immediately

  Here is my HTML Code:

  ```
  <!doctype html>
  <html lang="en">
  <body>
  <div>
    <p>
       Shipping Address: <br>
       <textarea name="shipAddress" id="addressInput" cols="30" rows="5"
       placeholder="Please enter your address." onchange="errorMessage()"></textarea>
    </p>
    <p>
       Merchandse Subtotal:
       <span id="merchandSubtotal"></span>
    </p>
    <p>
       Shipping Subtotal:
       <span id="shipSubtotal"></span>
    </p>
    <p>
       Total Payment: 
       <span id="total"></span>
    </p>
    <p> <input type="submit" value="Checkout" onclick="checkoutButton()"> </p>
  </div>
  </body>
  </html>
  ```

  And my JS:

  function errorMessage(){
  if(document.getElementsByTagName('textarea')['shipAddress'].value==''){
    document.getElementById('shipSubtotal').style.cssText='color: red; font-weight: bold;';
    document.getElementById('total').style.cssText='color: red; font-weight: bold;';
    document.getElementById('shipSubtotal').innerHTML='Please enter your address.';
    document.getElementById('total').innerHTML='Please enter your address.';
  }
  else{
    document.getElementById('shipSubtotal').innerHTML='';
    document.getElementById('total').innerHTML='';
  }  
  }

  The issues are when I run the site, it doesn't call the errorMessage() at first, instead, I need to write something in the textarea box and clear it only will call this function.
  How can I overcome this so that it straight call the function immediately after running the site?
• Html2canvas Ignores Object fit for image

  I've been trying to make use of html2canvas to take a screenshot of a element

  I noticed an image inside the div element that uses the object-fit property becomes stretched after the html2canvas screenshot

  Is there a walk around for this. Here is my code

  <script>window.addEventListener('load', function () {
  
        
   var bigCanvas = $("<div>").appendTo('body');
   var scaledElement = $("#Element").clone()
   .css({
    'transform': 'scale(1,1)',
    'transform-origin': '0 0'
   })
   .appendTo(bigCanvas);
   
   var oldWidth = scaledElement.width();
   var oldHeight = scaledElement.height();
  
   var newWidth = oldWidth * 1;
   var newHeight = oldHeight * 1;
   
   bigCanvas.css({
     'width': newWidth,
     'height': newHeight
   })
  
  
   html2canvas(bigCanvas, {
     onrendered: function(canvasq) {
     var image = document.getElementById('image');
    image.style.width='300px';
   
     image.src = canvasq.toDataURL();
     
      bigCanvas.remove() ;
     }
   });}) </script>
  

  While html goes as

  <div id="Element" class="container">
    
  <div class="bg-light p-3 text-center">
  
  <h3>iPhone 12 Pro Max</h3>
  
  <div class="m-2 shadow" style="height:400px;width:100%;">
  
  <img src="img/agency.jpeg" style="object-fit:cover;height:100%;width:100%;" />
  </div>
  
  <h4>Now available for free</h4>
  
  </div>
  
  </div>
  
  <div class="container" style="width:100%;border:2px solid black;overflow:hidden">
  
   <img src="" id="image" style="max-width:100%;"/>
   </div>
  
• The tiles of the map are displaying incorrectly when hosted on a web server

  I've made an interactive map as a third party tool for a video game using the leaflet API. All is working fine on my computer, but when I push my project on my host, the map has some tiling errors.

  Here is what it looks like on local

  Here is what it looks like on my host

  So i've stripped down my code to the bare minimum (no more markers, layerGroups...) and the bug persists.

  Here is my code:

      <!doctype html>
  
  <html>
  <head>
  
    <title>PROJECT TITLE</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
     integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
     crossorigin=""/>
     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
     integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
     crossorigin=""></script>
  
  </head>
  <body style="margin: 0;">
    <div id="map" style="width: 100vw; height: 100vh; background: #000000;"></div>
    <script>
    var map = L.map('map', {
      center: [0, 0],
      zoom: 2
    });
    L.tileLayer('map/{z}/{x}/{y}.png', {
      attribution: 'SOMETHING SOMETHING',
      minZoom: 2,
      maxZoom: 5,
      tileSize: 256,
      noWrap: true
    }).addTo(map);
    </script>
  </body>
  </html>
  

  Any help appreciated. Thanks !
• Check MYSQL table from Javascript

  For starters, I know you cannot run PHP as it's server-side and JS is client-side. But I'm almost certain I can call a PHP page, and check what I need to check.

  So I'm going to try and explain this as focused as I can.

  I have an HTML page that tells me prices for something. I have a MYSQL table that has information in it about the items I already have, when checking prices I need it to change the given value if I have marked it as such.

  So what I need to do in the jquery is call to the PHP page, through a $[GET_] URL so something like "price.php?id=[ontheflyIDfromjavascript] then the PHP in price.php will run the MySQL select, check if it exists and then return something that the javascript can then say "yes, it was found" or "no it was not found"

  I feel I've done a really bad job at explaining this but hope someone can help.
• Display element over text - html,css,js

  I want to overlap a ScrollMagic animation on a text, and not make the animation a separate section like it is right here:

  

  There is supposed to be text over there but it made this animation into a new section where the text is at the bottom.

  Code:

  gsap.registerPlugin(MotionPathPlugin);
  
  const tween = gsap.timeline();
  tween.to(".paper-plane", {
    duration: 1,
    ease: "power1.inOut",
    motionPath: {
      path: [
          {x: 100, y: 0},
          {x: 300, y: 10},
          {x: 500, y: 100},
          {x: 750, y: -100},
          {x: 350, y: -50},
          {x: 600, y: 100},
          {x: 800, y: 0},
          {x: window.innerWidth, y: -250}
      ], 
      curviness: 2,
      autoRotate: true
    }
  });
  
  const controller = new ScrollMagic.Controller();
  const scene = new ScrollMagic.Scene({
  triggerElement: '.animation',
  duration: 1000,
  triggerHook: 0
  })
  .setTween(tween)
  .setPin('.animation')
  .addTo(controller);

  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  header, footer{
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: "Montserrat", sans-serif;
  }
  header h1{
      font-size: 60px;
  }
  .animation{
      height: 100vh;
      position: relative;
      overflow: hidden;
  }
  .paper-plane{
      position: absolute;
      top: 50%;
      left: 0%;
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
  <div class="animation">
          <img class="paper-plane" src="https://i.postimg.cc/W1w9dT1x/paper.png" alt="Paper Plane">
      </div>

  What would I need to add to my css so that the animation displays on top of the text, I have not provided the code for my text because it can be any text in general. I just want this animation to work over text and not have a separate section of its own. Any suggestions?