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/[email protected]';
      
      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!

1 reply

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,
});

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

same picture on multiple canvas? #131

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 4 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

same picture on multiple canvas? #131

davehorner Feb 24, 2025

Replies: 4 comments · 3 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 24, 2025

Replies: 4 comments 3 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