Question 257644 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – html2canvas returns blank on site, but works fine in codepen

I’m using html2canvas with Shopify to capture the main product image in the slideshow.
There is an image and 3 SVG’s stacked inside the #screenshot div (absolute positioning) that need to be in the canvas. The SVG’s have to be inline and not an ‘img’ element as the SVG’s are being manipulated on the fly.

In codepen the canvas shows the correct screenshot, but on Shopify the canvas is showing up blank. What could be causing the issue?

The canvas output can be found at the very bottom of the page BELOW the site footer.

See codepen here:
https://codepen.io/pthornt1/pen/qBLoKga?editors=1111

and live site is here (password: bbl2023):
https://byebluelight-com.myshopify.com/products/team-customizations

JavaScript used:

let div = document.querySelector('#screenshot');
let width = document.querySelector('#screenshot').width;
let height = document.querySelector('#screenshot').height;
html2canvas(div, {
allowTaint: true,
scrollX: 0,
    scrollY: 0,
  width: width,
  height: height
}).then(function(canvas) {
    document.getElementById('output').appendChild(canvas);
});

#screenshot div:

<div id="screenshot">

<div class="product-media-container media-type-image media-fit-contain global-media-settings gradient" style="--ratio: 1.3333333333333333; --preview-ratio: 1.3333333333333333;">
  <noscript><div class="product__media media">
        <img src="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946" alt="Newport Side" srcset="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=246 246w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=493 493w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=600 600w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=713 713w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=823 823w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=990 990w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1100 1100w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1206 1206w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1346 1346w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1426 1426w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1646 1646w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946 1946w" width="1946" height="1460" sizes="(min-width: 1600px) 825px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
      </div></noscript>

  <modal-opener class="product__modal-opener product__modal-opener--image no-js-hidden" data-modal="#ProductModal-template--21061782307120__main">
    <span class="product__media-icon motion-reduce quick-add-hidden product__media-icon--hover" aria-hidden="true"><svg aria-hidden="true" focusable="false" class="icon icon-plus" width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.66724 7.93978C4.66655 7.66364 4.88984 7.43922 5.16598 7.43853L10.6996 7.42464C10.9758 7.42395 11.2002 7.64724 11.2009 7.92339C11.2016 8.19953 10.9783 8.42395 10.7021 8.42464L5.16849 8.43852C4.89235 8.43922 4.66793 8.21592 4.66724 7.93978Z" fill="currentColor"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.92576 4.66463C8.2019 4.66394 8.42632 4.88723 8.42702 5.16337L8.4409 10.697C8.44159 10.9732 8.2183 11.1976 7.94215 11.1983C7.66601 11.199 7.44159 10.9757 7.4409 10.6995L7.42702 5.16588C7.42633 4.88974 7.64962 4.66532 7.92576 4.66463Z" fill="currentColor"></path>
  <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8324 3.03011C10.1255 0.323296 5.73693 0.323296 3.03011 3.03011C0.323296 5.73693 0.323296 10.1256 3.03011 12.8324C5.73693 15.5392 10.1255 15.5392 12.8324 12.8324C15.5392 10.1256 15.5392 5.73693 12.8324 3.03011ZM2.32301 2.32301C5.42035 -0.774336 10.4421 -0.774336 13.5395 2.32301C16.6101 5.39361 16.6366 10.3556 13.619 13.4588L18.2473 18.0871C18.4426 18.2824 18.4426 18.599 18.2473 18.7943C18.0521 18.9895 17.7355 18.9895 17.5402 18.7943L12.8778 14.1318C9.76383 16.6223 5.20839 16.4249 2.32301 13.5395C-0.774335 10.4421 -0.774335 5.42035 2.32301 2.32301Z" fill="currentColor"></path>
</svg>
</span>
    <div class="loading-overlay__spinner hidden">
      <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle class="path" fill="none" stroke-width="4" cx="33" cy="33" r="30"></circle>
      </svg>
    </div>
    <div class="product__media media media--transparent">
      <img src="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946" alt="Newport Side" srcset="//byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=246 246w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=493 493w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=600 600w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=713 713w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=823 823w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=990 990w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1100 1100w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1206 1206w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1346 1346w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1426 1426w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1646 1646w, //byebluelight-com.myshopify.com/cdn/shop/products/newport-side-customizable.jpg?v=1695165543&amp;width=1946 1946w" width="1946" height="1460" class="image-magnify-hover" sizes="(min-width: 1600px) 825px, (min-width: 990px) calc(55.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
<svg class="customizable-svg--frames" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480 360" style="enable-background:new 0 0 480 360;" xml:space="preserve">
<g>
    <path d="M420.8,179.5C420.8,179.5,420.7,179.6,420.8,179.5c-0.2,2.9-2,3.4-4.4,3.8c-10.1,1.5-20.1,3-30.2,4.6
        c-4.8,0.8-9.5,2-14.3,3c-5.2,1.1-10.4,1.9-15.6,3.1c-5.2,1.2-10.1,3.2-15.2,4.7c-5.5,1.7-11,3.1-16.7,3.4c-5.7,0.3-11.3,0.5-17,0.8
        c-8.4,0.4-16.8,0.9-25.2,1.6c-8.4,0.7-16.8,1.6-25.1,2.6c-12.6,1.6-25,3.7-37.2,7.1c-12.3,3.4-23.9,8.3-34.2,16
        c-7.3,5.5-14.1,11.5-20.8,17.7c-8,7.4-15.5,15.4-22.9,23.4c-1.3,1.4-2.6,2.8-3.9,4.2c-0.4,0.4-0.8,0.8-1.1,1.3
        c-0.8,1.6-1.9,2.8-3.6,3.4c-2.6,0-5.1,0-7.7,0c-2.3-0.3-4.6-0.7-6.9-1c-0.6-0.1-1.3-0.2-1.8-0.6c-1.6-1.4-3.5-2.1-5.5-2.8
        c-2.1-0.8-2.4-2.5-0.7-4.1c0.3-0.3,0.7-0.6,1-0.8c15.2-10.5,30.4-21,45.6-31.4c8.7-5.9,17.1-12.1,26-17.6
        c13.9-8.5,28.9-14.1,44.9-17.5c13.6-2.9,27.3-4.9,40.9-7.2c8.7-1.4,17.3-3.2,25.9-4.6c7.9-1.4,15.8-2.6,23.8-4
        c10-1.7,20-3.6,30-5.4c3.1-0.5,6.1-1.3,9.3-1.1c0.6,0,1.3-0.1,1.9-0.3c7.6-2.1,15.4-2.9,23.2-4.1c6-0.9,12.1-2,18.1-3
        c5.5-0.9,11-1.7,16.5-2.5c1.5-0.2,2.4,0.6,3,2.6C420.8,176.5,420.8,178,420.8,179.5z"></path>
    <path d="M22.9,224.9c1.8-3.1,4-5.9,6-8.8c10.9-16,21.8-32,32.5-48.1c5-7.5,10.9-14.1,18.5-19c6.3-4.1,13.3-6.7,20.5-8.5
        c13.8-3.4,27.8-6.5,41.8-9c9.1-1.6,18.2-3.4,27.4-4.9c8.7-1.4,17.4-2.7,26.1-4c8.7-1.3,17.4-2.5,26.1-3.8c11-1.6,22-3.4,33-4.7
        c0.7-0.1,1.5-0.1,2.2-0.5c0.9,0,1.8,0,2.6,0c0.3,0.2,0.6,0.4,0.9,0.6c0.4,0.3,0.6,0.7,0.5,1.3c-0.1,0.5-0.5,0.5-0.9,0.6
        c-5.2,1.5-10.6,2.1-15.9,2.8c-2,0.3-4,0.7-6,0.9c-1.4,0.1-2,0.9-2.3,2.2c-0.1,0.5-0.2,1-0.2,1.5c0,1.9,0.6,2.4,2.5,2.2
        c5.4-0.4,10.8-0.8,16.2-0.9c-1.8,0.3-3.7,0.6-5.5,0.8c-14.1,1.7-28.1,4.1-42.1,7.1c-8.7,1.9-17.4,4-26.1,5.9c-4.4,1-9,1-13.5,1.1
        c-10.4,0.2-20.8,0.9-31.2,2.1c-10.5,1.2-21,3-31.3,5.4c-8.7,2-16.9,5.1-23.9,10.9c-5.5,4.5-9.6,10.1-13,16.2
        c-3.4,6-6.6,12.2-9.6,18.3c-4.1,8.2-7.9,16.5-11.1,25c-0.6,1.6-1.4,3.1-1.9,4.6c-1.9,5.2-5.8,7.4-11.1,7.4c-3.5,0-6.8-0.6-9.9-2.4
        c-0.5-0.3-0.8-0.7-1.2-1.1C22.9,225.8,22.9,225.3,22.9,224.9z"></path>
</g>
</svg>
      
<svg class="customizable-svg--text" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480 360" style="enable-background:new 0 0 480 360;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{font-family:proxima-nova,sans-serif;}
    .st2{font-size:6.2px;}
</style>
<text transform="matrix(0.9901 -0.1401 0.1401 0.9901 169.9463 135.1168)" class="st0 st1 st2">Newport</text>
</svg>
      
<svg class="customizable-svg--logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 480 360" style="enable-background:new 0 0 480 360;" xml:space="preserve">
<image class="frames-custom-logo" style="overflow:visible;" width="4035" height="1265" xlink:href="https://byebluelight-com.myshopify.com/cdn/shop/files/logo-light.svg" transform="matrix(4.057991e-03 -6.425153e-04 6.425153e-04 4.057991e-03 389.7445 179.6914)">
</image>
</svg>
      
    </div>
    <button class="product__media-toggle quick-add-hidden product__media-zoom-hover" type="button" aria-haspopup="dialog" data-media-id="35123680182576">
      <span class="visually-hidden">
        Open media 1 in modal
      </span>
    </button>
  </modal-opener></div>

        </div>
Tags:

2

Answers


  1. 0

    If you view the source of your shopify page, you can see that

    <div id="output"></div>

    is empty.

    In the codepen’s html there’s this:

    <div id="output"><canvas width="575" height="431" style="width: 523px; height: 392px;"></canvas><canvas width="590" height="442" style="width: 590px; height: 442px;"></canvas></div>

    Also if I enter your JS in the dev-console on your shopify page it tells me following:

    VM448:2 Uncaught TypeError: Cannot read properties of null (reading 'width')
    at <anonymous>:2:5

    Which seems to be logic, cause there is no #screenshot on this site.

    Hope this helps, if you have follow-up questions please feel free to ask

    Login or Signup to reply.
  2. 0

    As of my observation there few things need to keep in mind when play with canvas:

    1. Write all your script code in end of file.
    2. Make a debugging at point of adding canvas into dom.
    3. Canvas Element not initialize properly when script execute.

    Still you problem is not solve make a console.log() at below line & let me know Happy to help.
    document.getElementById('output').appendChild(canvas);

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search