[lnkForumImage]
TotalShareware - Download Free Software

Confronta i prezzi di migliaia di prodotti.
Asp Forum
 Home | Login | Register | Search 


 

Forums >

comp.lang.javascript

canvas; draw vector then restore overwritten area later

cate

1/31/2015 7:19:00 PM

Perhaps this is a question better asked in an html group, but I'm going with you guys. Most of the examples I see are javascript/jquery. You should know.

I have a huge image and I want to point out various areas as users click around. Say the image is a car. If the user clicks a TIRE link, a round circle will be drawn around the tire.

That looks doable. This is the question. If the user now click HEADLIGHTS can I some how restore the TIRE area to normal (redraw the original image pixels under the circle) without an entire repaint?

Thanks in advance.
9 Answers

Evertjan.

1/31/2015 7:37:00 PM

0

catebekensail@yahoo.com wrote on 31 jan 2015 in comp.lang.javascript:

> Perhaps this is a question better asked in an html group, but I'm going
> with you guys. Most of the examples I see are javascript/jquery. You
> should know.

Don't ask jquery Q here.

> I have a huge image and I want to point out various areas as users click
> around. Say the image is a car. If the user clicks a TIRE link, a
> round circle will be drawn around the tire.
>
> That looks doable. This is the question. If the user now click
> HEADLIGHTS can I some how restore the TIRE area to normal (redraw the
> original image pixels under the circle) without an entire repaint?

Somehow it seems you will have to think in layers. How else would you
repaint complicated backgrounds?

However methinks you should ask in a 'canvas animation' dedicated forum,
as javascript is only the means.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Denis McMahon

1/31/2015 8:10:00 PM

0

On Sat, 31 Jan 2015 11:19:12 -0800, catebekensail wrote:

> This is the question. If the user now click
> HEADLIGHTS can I some how restore the TIRE area to normal (redraw the
> original image pixels under the circle) without an entire repaint?

Use a transparent canvas element layered over an image (or another
canvas).

--
Denis McMahon, denismfmcmahon@gmail.com

Dr J R Stockton

2/1/2015 8:08:00 PM

0

In comp.lang.javascript message <d9b67bb2-7621-4fcf-ac46-dc41636aefb2@go
oglegroups.com>, Sat, 31 Jan 2015 11:19:12, catebekensail@yahoo.com
posted:

>Perhaps this is a question better asked in an html group, but I'm going
>with you guys. Most of the examples I see are javascript/jquery. You
>should know.
>
>I have a huge image and I want to point out various areas as users
>click around. Say the image is a car. If the user clicks a TIRE link,
>a round circle will be drawn around the tire.

I know of no better shape for a circle.

>That looks doable. This is the question. If the user now click
>HEADLIGHTS can I some how restore the TIRE area to normal (redraw the
>original image pixels under the circle) without an entire repaint?

You can save the whole of the canvas, before the circle is drawn, as a
(compressed?) bit-pattern; and, I suppose, you can reload it. That will
be a repaint, but not a recalculate. You may be able to do that to part
of a canvas.

A circle overlaid on a picture may in places not contrast with the
picture. If you can XOR the circle with the original picture, you can
re-XOR the circle to erase it.

--
(c) John Stockton, nr London, UK. E-mail, see Home Page. Turnpike v6.05.
Website <http://www.merlyn.demon.... - w. FAQish topics, links, acronyms
PAS EXE etc. : <http://www.merlyn.demon.co.uk/pro... - see in 00index.htm
Dates - miscdate.htm estrdate.htm js-dates.htm pas-time.htm critdate.htm etc.

Michael Haufe (\"TNO\")

2/2/2015 2:58:00 AM

0

On Saturday, January 31, 2015 at 1:19:25 PM UTC-6, catebe...@yahoo.com wrote:
> Perhaps this is a question better asked in an html group, but I'm going with you guys. Most of the examples I see are javascript/jquery. You should know.
>
> I have a huge image and I want to point out various areas as users click around. Say the image is a car. If the user clicks a TIRE link, a round circle will be drawn around the tire.
>
> That looks doable. This is the question. If the user now click HEADLIGHTS can I some how restore the TIRE area to normal (redraw the original image pixels under the circle) without an entire repaint?
>
> Thanks in advance.

Take a glance at the MDN tutorial:

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_...

Mike Duffy

2/4/2015 5:59:00 AM

0

On Sun, 1 Feb 2015 20:08:13 +0000, Dr J R Stockton wrote:

> A circle overlaid on a picture may in places not contrast with the
> picture. If you can XOR the circle with the original picture, you can
> re-XOR the circle to erase it.

This is indeed an elegant solution to the unstated problem of the drawing
colour having poor contrast against the existing contents of the canvas.

But does SVG have a drawing method that can combine the new object with
previously-rendered canvas values? Or does one need to re-compute or
alternatively "read back" the current canvas state within the area of
interest?

--
http://pages.videotron.com/duffym...

Dr J R Stockton

2/5/2015 11:16:00 PM

0

In comp.lang.javascript message <mascd6$7il$1@dont-email.me>, Wed, 4 Feb
2015 00:58:38, Mike Duffy <md_004@videotron.ca> posted:

>On Sun, 1 Feb 2015 20:08:13 +0000, Dr J R Stockton wrote:
>
>> A circle overlaid on a picture may in places not contrast with the
>> picture. If you can XOR the circle with the original picture, you can
>> re-XOR the circle to erase it.
>
>This is indeed an elegant solution to the unstated problem of the drawing
>colour having poor contrast against the existing contents of the canvas.

Yes. But it is not an absolutely new invention.

>But does SVG have a drawing method that can combine the new object with
>previously-rendered canvas values? Or does one need to re-compute or
>alternatively "read back" the current canvas state within the area of
>interest?

That raises two questions. Does the OP use SVG, and do I use SVG? I
think I do not - I use the canvas element, and cannot recall seeing
provision for XOR in it.

Someone should suggest to WHATWG that the method strokeStyle should
accept an argument "xor" for this purpose.

--
(c) John Stockton, nr London UK Reply address via Merlyn Home Page.
news:comp.lang.javascript FAQ <http://www.jibbering.com/faq/inde....
<http://www.merlyn.demon.co.uk/js-ind... jscr maths, dates, sources.
<http://www.merlyn.demon.... TP/BP/Delphi/jscr/&c, FAQ items, links.

Mike Duffy

2/6/2015 1:34:00 AM

0

On Thu, 5 Feb 2015 23:16:09 +0000, Dr J R Stockton wrote:

> That raises two questions. Does the OP use SVG, and do I use SVG?

Sorry, it has been a while since I did some SVG graphics, and I
mis-remembered "canvas" as being part of the SVG specification. (i.e. the
area (width & height) specified in the root xml tag).

As you have pointed out, these are 2 distinct graphics methodologies.


> Someone should suggest to WHATWG that the method strokeStyle should
> accept an argument "xor" for this purpose.

Yes. Also that one argument can be the currently-rendered existing pixel
value. As well as one should be able to explicitely specify the arguments
for the XOR operation.

--
http://pages.videotron.com/duffym...

Michael Haufe (\"TNO\")

2/6/2015 4:33:00 AM

0

On Thursday, February 5, 2015 at 6:41:25 PM UTC-6, Dr J R Stockton wrote:
> Someone should suggest to WHATWG that the method strokeStyle should
> accept an argument "xor" for this purpose.

or... take a look at the "globalCompositeOperation" property:

<https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compo...

options include:

source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy, xor, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity

Mike Duffy

2/6/2015 5:28:00 AM

0

On Thu, 5 Feb 2015 20:32:34 -0800 (PST), Michael Haufe (TNO) wrote:

> or... take a look at the "globalCompositeOperation" property:
>
> <https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compo...

Goodness. I had no idea that there were so many available drawing
operations.

But for the original poster, it looks like "Clipping paths" described near
the bottom of the page you refernced would do a better job. (Drawing and
then hiding a particular shape.)

--
http://pages.videotron.com/duffym...