1. Forum
  2. Usenet
  3. COMP.LANG.JAVASCRIPT

  • Putting PNG image into a part of a CANVAS element ??

    From John Stockton@21:1/5 to All on Sat Jan 1 06:18:55 2022
    I have a web-type page containing something like
    <img ID=XYZ src = "xxx.PNG">
    which displays as it should; therefore, the file name is OK.

    The page also contains a CANVAS element, which has been populated by
    JavaScript calls ; there is sometimes a gap in the middle of the
    diagram.

    I want to display that image inside that gap.

    What code should I use to do this? My efforts have displayed nothing,
    and given no Firefox error messages; but I can be sure that execution
    passes through my image-display code; that code is followed by the last bit of code of the script which just writes a sparse diagonal line of digits on
    the canvas and cannot hide the display of xxx.PNG.

    --
    (c) John Stockton, near London, UK. Using Google Groups. |

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Jon Ribbens@21:1/5 to John Stockton on Sat Jan 1 18:10:14 2022
    On 2022-01-01, John Stockton <dr.j.r.stockton@gmail.com> wrote:
    I have a web-type page containing something like
    <img ID=XYZ src = "xxx.PNG">
    which displays as it should; therefore, the file name is OK.

    The page also contains a CANVAS element, which has been populated by JavaScript calls ; there is sometimes a gap in the middle of the
    diagram.

    I want to display that image inside that gap.

    What code should I use to do this? My efforts have displayed nothing,
    and given no Firefox error messages; but I can be sure that execution
    passes through my image-display code; that code is followed by the last bit of code of the script which just writes a sparse diagonal line of digits on
    the canvas and cannot hide the display of xxx.PNG.

    const context = document.getElementById('myCanvas').getContext('2d') context.drawImage(document.getElementById('xyz'), 0, 0)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From John Stockton@21:1/5 to Jon Ribbens on Sat Jan 1 13:18:44 2022
    On Saturday, 1 January 2022 at 18:10:21 UTC, Jon Ribbens wrote:
    On 2022-01-01, John Stockton wrote:

    . . .
    I want to display that image inside that gap.
    . . .

    const context = document.getElementById('myCanvas').getContext('2d') context.drawImage(document.getElementById('xyz'), 0, 0)

    Tested; as expected, it works. I dare say that reading the MDN
    page for drawImage will enable me to get it shown with the
    right size and location - but not tonight.

    Thanks.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)