help understanding why I'm not seeing canvas full screen #118

davehorner · 2025-02-08T00:52:04Z

davehorner
Feb 8, 2025

https://codepen.io/Dave-Horner/pen/gbYVjXJ

   #dinoOverlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 10;
      border: 2px solid white;
      background-color: rgba(0, 0, 0, 0.1);
    }

I can size the canvas to 100% but for some reason the overlay is not rendering over the entire canvas.
I'm looking for makeCanvas which seems to be documented in https://www.scrawl.rikweb.org.uk/docs/source/core/library.html
but I see undefined.

davehorner · 2025-02-08T01:31:24Z

davehorner
Feb 8, 2025
Author

        overlayCanvas.set({
          width: width,
          height: height,
          fit: 'fill', // Ensure canvas covers the entire area
          renderOnResize: true // Forces a full re-render when resized
        });

got it.

4 replies

davehorner Feb 8, 2025
Author

I don't know how to make it so they are not blurry...

KaliedaRik Feb 8, 2025
Maintainer

Hi @davehorner - many thanks for trying out the library.

Try this code:

<!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>
      #video-background, .canvas-layer {
        position: absolute;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        border: 0;
      }
    </style>
  </head>
  <body>
    <iframe id="video-background"
      src="https://www.youtube.com/embed/L0LY3Fn5Xtc?autoplay=1&mute=0&controls=1&loop=1&playlist=L0LY3Fn5Xtc"
      allow="autoplay; encrypted-media; fullscreen" frameborder="0" allowfullscreen>
    </iframe>
    <div class="canvas-layer">
      <canvas 
        id="mycanvas" 
        data-scrawl-canvas
        data-is-responsive="true" 
      >
      </canvas>
    </div>

    <script type="module">
      import * as scrawl from 'https://unpkg.com/[email protected]';
      const canvas = scrawl.findCanvas('mycanvas');

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

      scrawl.importSprite({
        name: name('dinosaur'),
        manifestSrc: {
          default: [
            ["dinosprite_walk_0", 0, 0, 680, 472],
          ],
          walk: [
            ["dinosprite_walk_0", 0, 0, 440, 472],
            ["dinosprite_walk_1", 0, 0, 440, 472],
            ["dinosprite_walk_2", 0, 0, 440, 472],
            ["dinosprite_walk_3", 0, 0, 440, 472],
            ["dinosprite_walk_4", 0, 0, 440, 472],
            ["dinosprite_walk_5", 0, 0, 440, 472],
            ["dinosprite_walk_6", 0, 0, 440, 472],
            ["dinosprite_walk_7", 0, 0, 440, 472],
            ["dinosprite_walk_8", 0, 0, 440, 472],
            ["dinosprite_walk_9", 0, 0, 440, 472],
          ],
        },
        imageSrc: [
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_0.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_1.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_2.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_3.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_4.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_5.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_6.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_7.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_8.webp',
          'https://scrawl-v8.rikweb.org.uk/demo/img/dinosprite_walk_9.webp',
        ],
      });

      scrawl.makeRectangle({
        name: name('path'),
        rectangleWidth: '100%',
        rectangleHeight: '100%',
        radius: 100,
        method: 'draw',
        lineWidth: 5,
        useAsPath: true,
      });

      scrawl.makePicture({
        name: name('walking-dino'),
        asset: name('dinosaur'),
        dimensions: ['20%', '25%'],
        handle: ['center', '90%'],
        roll: 180,
        path: name('path'),
        addPathRotation: true,
        lockTo: 'path',
        method: 'fill',
        spriteTrack: 'walk',
        spriteFrameDuration: 100,
        delta: {
          pathPosition: -0.0006,
        }
      }).playSprite();

      scrawl.makeRender({
        name: name('animation'),
        target: canvas,
      });
    </script>
  </body>
</html>

KaliedaRik Feb 8, 2025
Maintainer

This change will fit the canvas to the <video> (assuming the video uses an aspect ratio of 16:9) rather than the <iframe>. It doesn't solve the problem of the canvas hiding the YouTube controls ... thus preventing users interacting with them.

<canvas 
  id="mycanvas" 
  data-base-width="1600"
  data-base-height="900"
  data-scrawl-canvas
  data-is-responsive="true" 
  data-fit="contain"
>
</canvas>

KaliedaRik Feb 8, 2025
Maintainer

This solves the problem of the canvas preventing user interacting with the YouTube controls:

<style>
  #video-background, .canvas-layer {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    border: 0;
  }
  .canvas-layer {
    pointer-events: none;
  }
</style>

davehorner · 2025-02-12T17:09:52Z

davehorner
Feb 12, 2025
Author

thanks for the response. I appreciate your time and code.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

help understanding why I'm not seeing canvas full screen #118

{{title}}

Replies: 2 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

help understanding why I'm not seeing canvas full screen #118

davehorner Feb 8, 2025

Replies: 2 comments · 4 replies

davehorner Feb 8, 2025 Author

davehorner Feb 8, 2025 Author

KaliedaRik Feb 8, 2025 Maintainer

KaliedaRik Feb 8, 2025 Maintainer

KaliedaRik Feb 8, 2025 Maintainer

davehorner Feb 12, 2025 Author

davehorner
Feb 8, 2025

Replies: 2 comments 4 replies

davehorner
Feb 8, 2025
Author

davehorner Feb 8, 2025
Author

KaliedaRik Feb 8, 2025
Maintainer

KaliedaRik Feb 8, 2025
Maintainer

KaliedaRik Feb 8, 2025
Maintainer

davehorner
Feb 12, 2025
Author