mycanvas defined but findCanvas('mycanvas') is not being found.

[davehorner]

I have been fighting with just getting the canvas and I'm not sure what's wrong.
https://codepen.io/Dave-Horner/pen/mydERBb

it's wrapped in a DOMContentLoaded! I'd like to learn how to use importDomImage.

I'm trying to take something like:
https://codepen.io/Dave-Horner/pen/pvooGLO

and use scrawl for each of the images instead of images. but just getting off the ground with finding the canvas is stumping me this evening.

iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js:1 Canvas element with id 'mycanvas' not found.

console.log(document.getElementById('mycanvas')); -> prints the element that exists, correctly.

it was stray lost ". I'll get there. thank you! would be interested in your thoughts on the best way to handle the loading of many images like that using importDomImage...

scrawl.addCanvas({ host: "",name: canvasId }); - I had to add a host field. if you don't pass one, I get hit by a substr on a null.
https://codepen.io/Dave-Horner/pen/RNwRKvP

[KaliedaRik]

Hi Dave. I see in your code you have this:

// Ensure the DOM is fully loaded before running the script
document.addEventListener('DOMContentLoaded', () => {
  const canvas = scrawl.findCanvas('mycanvas');
  console.log(document.getElementById('mycanvas'));
  // If the canvas doesn't exist, log an error and exit
  if (!canvas) {
    console.error("Canvas element with id 'mycanvas' not found.");
    return;
  }
  ...

You shouldn't need to do this sort of thing. The advice to make sure "everything is loaded" before letting SC run is probably overstated (my fault). Putting the SC code in a <script> tag at the end of the page is sufficient - by the time the browser reaches it, it will have already created the <canvas> elements that SC will be looking for.

I'd like to learn how to use importDomImage.

This should just work.

// Import image from the DOM (requires an image element with class "flowers" in your HTML)
scrawl.importDomImage('.flowers');
  
// Create a Picture entity using the imported image
const piccy = scrawl.makePicture({
  name: name('myFlower'),
  asset: 'iris', // the id for the imported DOM image
  ...

SC doesn't need to wait for the images to finish loading. It will create the Picture entitys and just not show them if the entity's asset hasn't finished loading. Once the asset is ready, the Picture will display. In theory, of course.

[davehorner]

I was injecting the script in the head incorrectly and this lead me to forcing the loaded event; i hadn't put the two together before you said something. changed my templates to NOT inject into the head. thanks again.

[davehorner]

@KaliedaRik https://codepen.io/Dave-Horner/pen/ogNLBRK
I can see that my images are all different colors based on the text displaying the hex and I believe the src is correct. GPT and I are working on trying to understand why it seems to be taking the first color and running with it.