same picture on multiple canvas? #131

davehorner · 2025-02-24T22:24:48Z

davehorner
Feb 24, 2025

Hello,

i'm not sure what it's showing for a picture when it does but it seems to pick one and stick with it.

https://codepen.io/Dave-Horner/pen/ogNLBRK
Still trying to kick the tires on the canvas image capabilities. I am logging the urls and they are all different colors. the pictures all seem to be the same. I had the host equal to "" and now its document.body. I am going to try the imageDOM stuff but the picture stuff should work with different urls. I'm stumped for now.

https://codepen.io/Dave-Horner/pen/wBvzMBg - img elements show what the images in the canvas should look like.

https://codepen.io/Dave-Horner/pen/yyLaeYv - tried the importDomImage.

      const img = document.createElement("img");
      img.src = src;
      img.id = `scrawl-canvas-${rowIndex}-${i}-img`;
      img.alt = labelText;
      img.style.maxWidth = "100%";
      canvasWrapper.appendChild(img);

      track.appendChild(canvasWrapper);
      scrawl.importDomImage(`scrawl-canvas-${rowIndex}-${i}-img`);
      // Create a picture entity on the canvas wrapper's base Cell
      const picName = `pic-${rowIndex}-${i}`;
      scrawl.makeLabel({
        name: picName,
        start: [20, 20],
        text: `${hexColor}\n\r${picName}`,
        order: 2,
        fontString: 'bold 40px Garamond, serif',
      });
      scrawl.makePicture({
        name: picName,
        host: newCanvas.getBase(),
        asset: `scrawl-canvas-${rowIndex}-${i}-img`,
        width: 150,
        height: 100,
        startX: 75,
        startY: 50,
        handleX: 75,
        handleY: 50,
        order: 0,
        method: 'fill'
      });

KaliedaRik · 2025-02-25T08:28:50Z

KaliedaRik
Feb 25, 2025
Maintainer

Hi, Dave.

It looks like the SC Pictures are unhappy with directly using images urls from that site as their src attribute? I suspect (but can't prove) CORS.

There is a workaround - generate images and add them to the HTML, then import them into SC so they can be used as Picture assets. I can get this code working on my local:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      canvas { margin: 1em auto; }
      .image-hold { height: 0; overflow: hidden; }
    </style>
  </head>
  <body>

    <canvas id="mycanvas" width="600" height="400" data-scrawl-canvas>
      <div class="image-hold"></div>
    </canvas>

    <script type="module">
      import * as scrawl from 'https://unpkg.com/scrawl-canvas@8.14.0';
      
      const canvas = scrawl.findCanvas('mycanvas');

      const namespace = `${canvas.name}-placehold`;
      const name = (n) => `${namespace}-${n}`;

      const hold = document.querySelector('.image-hold');

      const colors = [
        '000', '444', '777', 'aaa', 'ddd', 'fff', 'f00', 'f44', 
        'f77', 'faa', 'fdd', '0ff', '0f0', '4f4', '7f7', 'afa', 
        'dfd', 'f0f', '00f', '44f', '77f', 'aaf', 'ddf', 'ff0'
      ];
      const getColor = () => colors[Math.floor(Math.random() * colors.length)];

      for (let x = 0; x < 100; x += 25) {
        for (let y = 0; y < 100; y += 25) {

          const imageId = name(`img-${x}-${y}`);
          const image = document.createElement('img');

          image.src = `https://placehold.co/600x400/${getColor()}/${getColor()}?text=Hello!`;
          image.id = imageId;
          image.className = 'placeholder-images',
          image.crossOrigin = 'anonymous';
          hold.appendChild(image);

          scrawl.makePicture({
            name: name(`img-${x}-${y}`),
            asset: imageId,
            dimensions: ['25%', '25%'],
            copyDimensions: ['100%', '100%'],
            startX: `${x}%`,
            startY: `${y}%`,
          });
        }
      }

      scrawl.importDomImage('.placeholder-images');

      scrawl.makeRender({
        name: name('animation'),
        target: canvas,
      });

      console.log(scrawl.library);
    </script>
  </body>
</html>

1 reply

davehorner Feb 25, 2025
Author

that script does work. I will take a look; I don't think cors is an issue.

curl https://placehold.co/600x400/A9E654/FFF?text=5F -v
*   Trying 104.21.96.1:443...
* Connected to placehold.co (104.21.96.1) port 443 (#0)
< access-control-allow-origin: *

I'll try to trace through tonight maybe. Thanks for a working sample.

https://codepen.io/Dave-Horner/pen/yyLaeYv - tried the importDomImage. - the src images are loaded, you'd expect the import to work given the images are displaying.

KaliedaRik · 2025-02-25T17:37:56Z

KaliedaRik
Feb 25, 2025
Maintainer

This line:

scrawl.importDomImage(`scrawl-canvas-${rowIndex}-${i}-img`);

The function takes a CSS selector string. Thus the argument needs to be #scrawl-canvas-${rowIndex}-${i}-img

1 reply

davehorner Feb 25, 2025
Author

Thank you so much.
https://codepen.io/Dave-Horner/pen/yyLaeYv

that does it! so asset needs no # but importDomImage() does - css selector. I'm looking forward to playing more with this. THANKS!

the colors are there now, but I sized the image to be small enough to fit the entire image, and I don't see the text of the image. lol
closer. also interesting is that when you change the color drop down; the prior image colors remain bound.

davehorner · 2025-02-26T00:20:42Z

davehorner
Feb 26, 2025
Author

I tried just setting it to a wikipedia image.
https://codepen.io/Dave-Horner/pen/XJWjyNR

it displays a blue patch. I don't know where its getting colors from.
I actually don't know how to trace makePicture.

0 replies

KaliedaRik · 2025-02-26T07:26:42Z

KaliedaRik
Feb 26, 2025
Maintainer

The copyWidth and copyHeight attributes default to 1, so what you're seeing is the top-left pixel of the image.

scrawl.makePicture({
  name: picName,
  host: newCanvas.getBase(),
  asset: `scrawl-canvas-${rowIndex}-${i}-img`,
  width: 150,         // default: 0
  height: 150,        // default: 0
  copyWidth: '100%',  // default: 1
  copyHeight: '100%', // default: 1
  startX: 0,          // default: 0
  startY: 0,          // default: 0
  handleX: 0,         // default: 0
  handleY: 0,         // default: 0
  order: 0,           // default: 0
  method: 'fill'      // default: 'fill'
});

(I assume by host, you meant group?)

All the attributes have defaults. This also works:

scrawl.makePicture({
  name: picName,
  asset: `scrawl-canvas-${rowIndex}-${i}-img`,
  dimensions: [150, 150],
  copyDimensions: ['100%', '100%'],
});

Happy coding!

3 replies

KaliedaRik Feb 26, 2025
Maintainer

Also, some of the stuff that's happening after the new canvas gets created can be rolled into the addCanvas function:

const canvasWrapper = document.createElement("div");
canvasWrapper.classList.add("imageWrapper");

const canvasId = `scrawl-canvas-${rowIndex}-${i}`;

// addCanvas will append the new canvas element to the host element for us
const newCanvas = scrawl.addCanvas({
  host: canvasWrapper,
  id: canvasId,
  // Makes the canvas responsive
  isResponsive: true,
});

davehorner Feb 26, 2025
Author

thank you. knew there had to be a better way than the way I was doing it; but it did work! :)

davehorner Feb 26, 2025
Author

The copyWidth and copyHeight attributes default to 1, so what you're seeing is the top-left pixel of the image.

Yes, going to have to learn what all those parameters do. 👍

scrawl.makePicture({
  name: picName,
  host: newCanvas.getBase(),
  asset: `scrawl-canvas-${rowIndex}-${i}-img`,
  width: 150,         // default: 0
  height: 150,        // default: 0
  copyWidth: '100%',  // default: 1
  copyHeight: '100%', // default: 1
  startX: 0,          // default: 0
  startY: 0,          // default: 0
  handleX: 0,         // default: 0
  handleY: 0,         // default: 0
  order: 0,           // default: 0
  method: 'fill'      // default: 'fill'
});

(I assume by host, you meant group?)

host came from example, I'm not sure what you mean by group or host actually.

Happy coding!

Indeed.

KaliedaRik · 2025-02-26T07:58:11Z

KaliedaRik
Feb 26, 2025
Maintainer

I actually don't know how to trace makePicture.

If you mean documentation - https://tsdocs.dev/docs/scrawl-canvas/8.14.0 - they automatically generate docs from the SC .d.ts file. I've never checked in detail how accurate their doc generation is, but it seems to be quite comprehensive.

1 reply

davehorner Feb 26, 2025
Author

no I mean like set a breakpoint in the scrawl codebase and step through the function. I don't see scrawl show up in my network scripts/debugger; I was going to place a debugger; line in makePicture and walk through it (im using CDN now); thankfully I don't need to do that with your help!

davehorner · 2025-02-26T09:54:02Z

davehorner
Feb 26, 2025
Author

    // Clear previous canvases from track
    scrawl.purge(`scrawl-canvas-${rowIndex}`);
    const allImages = track.querySelectorAll('img');
    allImages.forEach(img => {
      img.remove(); // Remove the image from the DOM
    });

this is what I ended up using for clearing the images. purge will not disconnect from the prior source or something; i shouldn't be creating multiple img elements with the same name and that's my responsibility to clean up. i assume its best to not delete the images until after the purge but it seems to work in either order.

thanks for all the help!

0 replies

Uh oh!

same picture on multiple canvas? #131

Uh oh!

Uh oh!

davehorner Feb 24, 2025

Replies: 6 comments · 6 replies

Uh oh!

KaliedaRik Feb 25, 2025 Maintainer

Uh oh!

Uh oh!

davehorner Feb 25, 2025 Author

Uh oh!

KaliedaRik Feb 25, 2025 Maintainer

Uh oh!

Uh oh!

davehorner Feb 25, 2025 Author

Uh oh!

davehorner Feb 26, 2025 Author

Uh oh!

Uh oh!

KaliedaRik Feb 26, 2025 Maintainer

Uh oh!

KaliedaRik Feb 26, 2025 Maintainer

Uh oh!

davehorner Feb 26, 2025 Author

Uh oh!

davehorner Feb 26, 2025 Author

Uh oh!

KaliedaRik Feb 26, 2025 Maintainer

Uh oh!

davehorner Feb 26, 2025 Author

Uh oh!

davehorner Feb 26, 2025 Author

davehorner
Feb 24, 2025

Replies: 6 comments 6 replies

KaliedaRik
Feb 25, 2025
Maintainer

davehorner Feb 25, 2025
Author

KaliedaRik
Feb 25, 2025
Maintainer

davehorner Feb 25, 2025
Author

davehorner
Feb 26, 2025
Author

KaliedaRik
Feb 26, 2025
Maintainer

KaliedaRik Feb 26, 2025
Maintainer

davehorner Feb 26, 2025
Author

davehorner Feb 26, 2025
Author

KaliedaRik
Feb 26, 2025
Maintainer

davehorner Feb 26, 2025
Author

davehorner
Feb 26, 2025
Author