Rocksolid Light

Welcome to RetroBBS

mail  files  register  newsreader  groups  login

Message-ID:  

What this country needs is a good five cent microcomputer.

devel / comp.lang.javascript / Putting PNG image into a part of a CANVAS element ??

SubjectAuthor
* Putting PNG image into a part of a CANVAS element ??John Stockton
`* Re: Putting PNG image into a part of a CANVAS element ??Jon Ribbens
 `- Re: Putting PNG image into a part of a CANVAS element ??John Stockton

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

<bd91048b-05e5-46ae-9e87-ea9ad7e58ae8n@googlegroups.com>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=17600&group=comp.lang.javascript#17600

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:6214:5286:: with SMTP id kj6mr35345619qvb.74.1641046735630;
Sat, 01 Jan 2022 06:18:55 -0800 (PST)
X-Received: by 2002:a9d:4c15:: with SMTP id l21mr28294588otf.127.1641046735369;
Sat, 01 Jan 2022 06:18:55 -0800 (PST)
Path: i2pn2.org!i2pn.org!weretis.net!feeder6.news.weretis.net!news.misty.com!border2.nntp.dca1.giganews.com!border1.nntp.dca1.giganews.com!nntp.giganews.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Sat, 1 Jan 2022 06:18:55 -0800 (PST)
Injection-Info: google-groups.googlegroups.com; posting-host=94.30.84.71; posting-account=jWrkcgoAAADHtaq4DIr9RtcEBEH6q0En
NNTP-Posting-Host: 94.30.84.71
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <bd91048b-05e5-46ae-9e87-ea9ad7e58ae8n@googlegroups.com>
Subject: Putting PNG image into a part of a CANVAS element ??
From: dr.j.r.stockton@gmail.com (John Stockton)
Injection-Date: Sat, 01 Jan 2022 14:18:55 +0000
Content-Type: text/plain; charset="UTF-8"
Lines: 16
 by: John Stockton - Sat, 1 Jan 2022 14:18 UTC

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. |

Re: Putting PNG image into a part of a CANVAS element ??

<slrnst1686.8iup.jon+usenet@raven.unequivocal.eu>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=17602&group=comp.lang.javascript#17602

  copy link   Newsgroups: comp.lang.javascript
Path: i2pn2.org!i2pn.org!aioe.org!eternal-september.org!reader02.eternal-september.org!.POSTED!not-for-mail
From: jon+usenet@unequivocal.eu (Jon Ribbens)
Newsgroups: comp.lang.javascript
Subject: Re: Putting PNG image into a part of a CANVAS element ??
Date: Sat, 1 Jan 2022 18:10:14 -0000 (UTC)
Organization: A noiseless patient Spider
Lines: 18
Message-ID: <slrnst1686.8iup.jon+usenet@raven.unequivocal.eu>
References: <bd91048b-05e5-46ae-9e87-ea9ad7e58ae8n@googlegroups.com>
Injection-Date: Sat, 1 Jan 2022 18:10:14 -0000 (UTC)
Injection-Info: reader02.eternal-september.org; posting-host="98bc77a6b33ee552cec336da0e62910c";
logging-data="19019"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX19OQYK9qwD8Gj2vjIrM88UTH5sJpFy2TbA="
User-Agent: slrn/1.0.3 (Linux)
Cancel-Lock: sha1:yOvEXH5vQuFRuAEgyNu/634c6P8=
 by: Jon Ribbens - Sat, 1 Jan 2022 18:10 UTC

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)

Re: Putting PNG image into a part of a CANVAS element ??

<8090f81f-53bd-4c98-86a4-eadba2fad9ffn@googlegroups.com>

  copy mid

https://www.rocksolidbbs.com/devel/article-flat.php?id=17603&group=comp.lang.javascript#17603

  copy link   Newsgroups: comp.lang.javascript
X-Received: by 2002:a05:622a:389:: with SMTP id j9mr36118793qtx.504.1641071925206;
Sat, 01 Jan 2022 13:18:45 -0800 (PST)
X-Received: by 2002:a54:4017:: with SMTP id x23mr10465461oie.150.1641071924923;
Sat, 01 Jan 2022 13:18:44 -0800 (PST)
Path: i2pn2.org!i2pn.org!weretis.net!feeder6.news.weretis.net!news.misty.com!border2.nntp.dca1.giganews.com!border1.nntp.dca1.giganews.com!nntp.giganews.com!news-out.google.com!nntp.google.com!postnews.google.com!google-groups.googlegroups.com!not-for-mail
Newsgroups: comp.lang.javascript
Date: Sat, 1 Jan 2022 13:18:44 -0800 (PST)
In-Reply-To: <slrnst1686.8iup.jon+usenet@raven.unequivocal.eu>
Injection-Info: google-groups.googlegroups.com; posting-host=94.30.84.71; posting-account=jWrkcgoAAADHtaq4DIr9RtcEBEH6q0En
NNTP-Posting-Host: 94.30.84.71
References: <bd91048b-05e5-46ae-9e87-ea9ad7e58ae8n@googlegroups.com> <slrnst1686.8iup.jon+usenet@raven.unequivocal.eu>
User-Agent: G2/1.0
MIME-Version: 1.0
Message-ID: <8090f81f-53bd-4c98-86a4-eadba2fad9ffn@googlegroups.com>
Subject: Re: Putting PNG image into a part of a CANVAS element ??
From: dr.j.r.stockton@gmail.com (John Stockton)
Injection-Date: Sat, 01 Jan 2022 21:18:45 +0000
Content-Type: text/plain; charset="UTF-8"
Lines: 14
 by: John Stockton - Sat, 1 Jan 2022 21:18 UTC

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.

devel / comp.lang.javascript / Putting PNG image into a part of a CANVAS element ??

1
server_pubkey.txt

rocksolid light 0.9.81
clearnet tor